参考:
https://docs.angularjs.org/api/ng/service/$compile
http://www.zouyesheng.com/angular.html
Directive (指令),是Angular最为强大和复杂的部分。directive可以扩展丰富html的行为。
举个例子,如果我们想让html某元素在屏幕上居中显示,我们无需知道屏幕窗口实际的宽度,只需加上align="center"属性就能达到目的。
这是html提供给我们好的接口行为。但是如果想要元素在屏幕的1/3位置显示,这就有些困难了。因为html并没有提供给我们这种语法。
我们可以通过directive定义一些新的行为,然后让Angular提供的HTML compiler(编译器)去解析并编译行为。更进一步,当我们开发应用系统,我们甚至可以为该应用创建特定的directive。
即Domain Specific Language 领域特定语言。
使用指令可以增强复用性。节省很多代码。
定义指令可以使用下面的写法模板
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, iElement, iAttrs, controller) { ... } } }, link: function postLink(scope, iElement, iAttrs) { ... } }; return directiveDefinitionObject; });
由上可知,定义指令,需要返回一个对象。对象中包含很多属性如restrict,replace等。下面根据例子介绍每个属性的用法。
例1
See the Pen 1. basic by finley (@mafeifan) on CodePen.
如下有两个指令,分别是元素类型和属性类型。
<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>
生成的html都是超链接。
参数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 注释方式 <!-- directive: my-directive exp -->
参数template:要替换的内容。
参数templateUrl:从指定的url读模版内容,如果内容很长或者需要复用就用这个参数吧。比如我们可以写成
templateUrl : "../myTemplate.html" // 或者动态获取 templateUrl: function(element, attrs) { return attrs.templateUrl || '../../uib/template/alert/alert.html'; },
参数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>
参数link:
例2 link方法
See the Pen Directive/2 link by finley (@mafeifan) on CodePen.
参数scope:绑定策略
参数compile和 link。分别代表编译和链接。
例3 绑定
如下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>
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,
// 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'}
};
});
例4 transclude
See the Pen NG Directive学习4 transclude by finley (@mafeifan) on CodePen.