资讯

精准传达 • 有效沟通

从品牌网站建设到网络营销策划，从策略到执行的一站式服务

网站建设 >

查看其它板块

Angular.JS中的指令引用template与指令当做属性详解

一、引用template

创新互联建站是一家专注于网站制作、成都网站建设与策划设计,长治网站建设哪家好?创新互联建站做网站,专注于网站建设10余年,网设计领域的专业建站公司;建站业务涵盖:长治等地区。长治做网站价格咨询:028-86922220

对于指令，可以把它简单的理解成在特定DOM元素上运行的函数，指令可以扩展这个元素的功能。

指令要生效，那么html头里面要

制定ng-app的值和定义指令的module名字一致：
angular.module('app',[])
指令的完整参数：
angular.module('myApp', [])
.directive('myDirective', function() {
 return {
 restrict: String,
 priority: Number,
 terminal: Boolean,
 template: String or Template Function:
 function(tElement, tAttrs) {...},
 templateUrl: String,
 replace: Boolean or String,
 scope: Boolean or Object,
 transclude: Boolean,
 controller: String or
 function(scope, element, attrs, transclude, otherInjectables) { ... },
 controllerAs: String,
 require: String,
 link: function(scope, iElement, iAttrs) { ... },
 compile: // 返回一个对象或连接函数，如下所示： function(tElement, tAttrs, transclude) {
 return {
 pre: function(scope, iElement, iAttrs, controller) { ... },
 post: function(scope, iElement, iAttrs, controller) { ... }
 }
 return function postLink(...) { ... }
 }
 };
 });
指令可以使用的方式：
restrict[string]
restrict是一个可选的参数。用于指定该指令在DOM中以何种形式被声明。默认值是A，即以属性的形式来进行声明。
可选值如下：
  • E（元素）
    •   
  • A（属性，默认值）
    •   
  • C（类名）
    •   
  • M（注释）<--directive:my-directive expression-->
     
replace[bool]
replace是一个可选参数，如果设置了这个参数，值必须为true，因为默认值为false。默认值意味着模板会被当作子元素插入到调用此指令的元素内部,
例如上面的示例默认值情况下，生成的html代码如下：
百度
如果设置replace=true
百度
据我观察，这种效果只有设置restrict="E"的情况下，才会表现出实际效果。
template[string or function]
template参数是可选的，必须被设置为以下两种形式之一：
 一段HTML文本；
一个可以接受两个参数的函数，参数为tElement和tAttrs，并返回一个代表模板的字符串。tElement和tAttrs中的t代表template，是相对于instance的。
不管是返回html文本还是函数，都是最后替换一个html，和replace属性搭配使用的，先给出一个完整的index.heml directive.js，以这个为例子来说明：




 
 My HTML File
 
 
 



 



然后js：
 angular.module('app',[])
 .directive('myDirective', function () {
 return {
 restrict: 'E',
 template: '百度'
 };
 })
最后的运行效果以及firebug查看到的效果：
​Angular.JS中的指令引用template与指令当做属性详解
如果添加指令的replace属性为ture，那么就不会有这个directvie指令部分了：
​Angular.JS中的指令引用template与指令当做属性详解
上面就是差别。
再说说指令定义里面模板参数是函数的情况，我们改写html以及js：




 
 My HTML File
 
 
 



 




js文件：
angular.module('app',[])
 .directive('myDirective', function () {
 return {
 restrict: 'EAC',
 template: function (elem, attr) {
  return "" + attr.text + "";
 }
 };
 })
指令定义的template是一个函数对象，返回一个html的字符串，那么他的elem和attr就是分别代表这个指令和他在index.html里面的属性：
attr.value和attr.text分别对应：
里面的value和text。
不replace的情况：
​Angular.JS中的指令引用template与指令当做属性详解
二、指令当做属性
上面说过：
angular.module('myApp', []) 
 .directive('myDirective', function() { 
 return { 
 restrict: String, 后面省略
指令restrict有四种用法，默认是A，也就是当做属性，
  • E（元素）
    •   
  • A（属性，默认值）
    •   
  • C（类名）
    •   
  • M（注释）<--directive:my-directive expression-->
     
然后如果一个指令直接返回一个函数的时候，其实返回的一个link函数，比如：
angular.module('time', [])
 .directive('xxx', function() {
 return function(scope, element, attrs) {
这个是表示直接link。
当指令做属性的时候，有两重含义：
      1.在一个html元素里面制定为属性
      2.js定义的指令名。
看一个例子：
JS：
angular.module('time', [])
 .controller("Ctrl2", function($scope) {
 $scope.format = 'M/d/yy h:mm:ss a';
 })
 // Register the 'myCurrentTime' directive factory method.
 // We inject $timeout and dateFilter service since the factory method is DI.
 .directive('myCurrentTime', function($timeout, dateFilter) {
 // return the directive link function. (compile function not needed)
 return function(scope, element, attrs) {
  var format, // date format
  timeoutId; // timeoutId, so that we can cancel the time updates

  // used to update the UI
  function updateTime() {
  element.text(dateFilter(new Date(), format));
  }

  // watch the expression, and update the UI on change.
  scope.$watch(attrs.myCurrentTime, function(value) {
  format = value;
  updateTime();
  });

  // schedule update in one second
  function updateLater() {
  // save the timeoutId for canceling
  timeoutId = $timeout(function() {
   updateTime(); // update DOM
   updateLater(); // schedule another update
  }, 1000);
  }

  // listen on DOM destroy (removal) event, and cancel the next UI update
  // to prevent updating time ofter the DOM element was removed.
  element.bind('$destroy', function() {
  $timeout.cancel(timeoutId);
  });

  updateLater(); // kick off the UI update process.
 }
 });
然后index.html:




 
 My HTML File
 
 
 



 

 Date format:
 
 

 Current time is: 
 




注意：ng-app="time"一定要指明是time。否则无法关联起来。
分析如下：
  • 给span制定了一个属性，绑定到了scope里面的format
    •   
    •   
  • 定义了输入框，绑定了scope里面的format
    •   
    •   
  • 定义了controller -- Ctrl2， 然后引入了scope，定义了变量format
    •   
  • 定义了指令myCurrentTime ， 然后就是和html里面的my-current-time="format"对应，html里面用破折号连起来，指令就是驼峰样子的myCurrentTime（首字母小写）
    •   
  • link函数的三个参数，以及attrs的使用：
  
    return function(scope, element, attrs) {
scope.$watch(attrs.myCurrentTime, function(value) {
      
    •   
  • 可看到，myCurrentTime既是指令名字，然后在这个span元素里面又是属性名，他的值是format的真实值。
    •   
  • 用firebug看到：Angular.JS中的指令引用template与指令当做属性详解
    •   
  • 指令当成属性，不会有replace起作用的时候，不会被替换也不会插入，就是一个属性，后面的日期值，其实是updateTime()函数直接写elem.text的效果。
    •   
  • 此处指令当做属性的作用就是扩展当前元素的功能。
总结
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流，谢谢大家对创新互联的支持。
            
            
                        

            本文题目：Angular.JS中的指令引用template与指令当做属性详解            

            标题网址：http://cdkjz.cn/article/peophd.html
        

        

            返回首页
            了解更多建站资讯
        

    





    
相关资讯

    

        
    





    

        

            

                多年建站经验
            

            

                
多一份参考，总有益处

                
 联系快上网，免费获得专属《策划方案》及报价

                

                    
咨询相关问题或预约面谈，可以通过以下方式与我们联系

                    
 大客户专线   成都：13518219792
                          座机：028-86922220
                    

                

            

        

        

            在线咨询
            提交需求
        

    





    

        

            

                友情链接
                交换友情链接
            

            

                

                    成都门窗定制成都网站建设成都网站制作彭州网站建设众诚伟业网站建设什邡网站建设重庆网站建设公司租用服务器成都展柜设计公司                

            

        

    

    

        

            
成都网站建设公司地址：成都市青羊区太升南路288号锦天国际A座10层 建设咨询028-86922220

            

                成都快上网科技有限公司-四川网站建设设计公司 | 蜀ICP备19037934号 Copyright 2020,ALL Rights Reserved cdkjz.cn | 成都网站建设 | © Copyright 2020版权所有.

            
专家团队为您提供成都网站建设,成都网站设计,成都品牌网站设计,成都营销型网站制作等服务,成都建网站就找快上网！ | 成都网站建设哪家好？ | 网站建设地图