Angular中Directive总结

@H_502_0@参考：http://www.zouyesheng.com/angular.html

@H_502_0@Directive指令

@H_502_0@个人理解增强复用性。

@H_502_0@操作dom最好放到指令中不要放到controller中。

@H_502_0@定义指令的写法模板

var myModule = angular.module(...); myModule.directive('directiveName',function factory(injectables) { var directiveDefinitionObject = { priority: 0,template: '<div></div>',templateUrl: 'directive.html',replace: false,transclude: false,restrict: 'A',scope: false,compile: function compile(tElement,tAttrs,transclude) { return { pre: function preLink(scope,iElement,iAttrs,controller) { ... },post: function postLink(scope,controller) { ... } } },link: function postLink(scope,iAttrs) { ... } }; return directiveDefinitionObject; });

@H_502_0@由上可知，定义指令，需要返回一个对象。对象中包含很多属性如restrict，replace等。下面根据例子介绍每个属性的用法。

@H_502_0@例1

@H_502_0@See the Pen Directive/1 Basic by finley (@mafeifan ) on CodePen.

@H_502_0@生成的html为

<my-directive><a href="http://google.com">Click me to go to Google</a></my-directive>
<p my-directive=""><a href="http://google.com">Click me to go to Google</a></p>

@H_502_0@参数restrict：个人理解指令的使用方式。可选值EACM。分别代表element，attribute，class和comment。

E 元素方式 <my-directive></my-directive>
A 属性方式 <div my-directive="exp"> </div>
C 类方式 <div class="my-directive: exp;"></div>
M 注释方式

@H_502_0@参数template：要替换的内容。

@H_502_0@参数templateUrl：从指定的url读模版内容，如果内容很长或者需要复用就用这个参数吧。比如我们可以写成

templateUrl : "../myTemplate.html" 
// 或者动态获取
templateUrl: function(element,attrs) { return attrs.templateUrl || '../../uib/template/alert/alert.html'; },

@H_502_0@参数replace：是否使用模板内容替换掉整个节点， true 替换整个节点， false 替换节点内容。如例1，若replace为true。则生成的html结构如下：

<a href="http://google.com">Click me to go to Google</a>
<a href="http://google.com" my-directive="">Click me to go to Google</a>

@H_502_0@参数link：

@H_502_0@例2 link方法

@H_502_0@See the Pen Directive/2 link by finley (@mafeifan ) on CodePen.

@H_502_0@参数scope：绑定策略

@H_502_0@参数link和compile。分别代表编译和链接。

@H_502_0@例3 绑定

@H_502_0@如下TestCtrl里div元素有4个属性。a,abc,xx,c

<body ng-app="myApp">
      <div ng-controller="TestCtrl">
        <div a abc="here" xx="{{ a }}" c="ccc"></div>
      </div>
  </body>

@H_502_0@JS

angular.module('myApp',[]) .controller('TestCtrl',function($scope){ $scope.a = '123'; $scope.here = 'here ~~'; }) .directive('a',function(){ var func = function(element,attrs,link){ return function(scope){ /** 输出结果 a: "here" b: "123" c: "ccc" d: "ccc" e: "here ~~ */ console.log(scope); }; }; return { restrict: 'A',compile: func,

@H_502_0@ // a 找到属性名为abc，其值为here
// b 找到属性名为xx，其值为{{a}} 接着找$scope.a 存在，其值为 123
// c @attrName 没有写attrName,默认取自己的值,等价于@c,找到属性c，其值为ccc
// d 如上
// e '=abc' 把属性abc的值当作scope的属性名。这里存在属性abc，其值为here。存在$scope.here。最终值为'here ~~'
// 若改为abc={{ here }} 效果跟 b: '@xx '一样

scope: {a: '@abc',b: '@xx',c: '@',d: '@c',e: '=abc'} }; });

@H_502_0@例4 transclude 方法

@H_502_0@See the Pen NG Directive学习4 transclude by finley (@mafeifan) on CodePen.

@H_502_0@name

@H_502_0@priority

@H_502_0@terminalcontrollerrequiretransclude

Angular中Directive总结

猜你在找的Angularjs相关文章