- transclude: 指令元素中原来的子节点移动到一个新模板内部,当为 true 时,指令会删掉原来的内容,使模板可以用 ng-transclude 指令进行重新插入。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div ng-app="myApp"> <div ng-controller="firstController"> <custom-tags>原始数据</custom-tags> </div> </div> <script type="text/javascript" src="../../vendor/angular/angularjs.js"></script> <script type="text/javascript" src="app/index.js"></script> </body> </html>
var myApp = angular.module('myApp',[]) .directive('customTags',function () { return{ restrict: 'ECAM', template: '<div>新数据 <span ng-transclude></span></div>', replace: true, transclude: true } }) .controller('firstController',['$scope',function ($scope) { $scope.name = 'Alrale'; }]);
- priority: 设置指令在模板中的执行顺序,顺序是相对于元素上其他执行而言的,默认为0,从大到小的顺序依次执行。设置优先级的情况比较少,像 ng-repeat,在遍历元素的过程中,需要 angular 先拷贝生成的模板元素,再应用其他指令,所以 ng-repeat 默认的 priority 是1000.
- terminal: 是否以当前指令的权重为结束界限。如果设置为 true,则节点中小于当前指令的其他指令不会被执行。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div ng-app="myApp"> <div ng-controller="firstController"> <custom-tags>原始数据</custom-tags> <div custom-tags2 custom-tags3></div> </div> </div> <script type="text/javascript" src="../../vendor/angular/angularjs.js"></script> <script type="text/javascript" src="app/index.js"></script> </body> </html>
var myApp = angular.module('myApp',[]) .directive('customTags',function () { return{ restrict: 'ECAM', template: '<div>新数据 <span ng-transclude></span></div>', replace: true, transclude: true } }) .directive('customTags2',function () { return{ restrict: 'ECAM', template: '<div>2</div>', replace: true, priority: -1 } }) .directive('customTags3',function () { return{ restrict: 'ECAM', template: '<div>3</div>', replace: true, priority: 0, //小于 0 的 directive 都不会执行 //terminal: true } }) .controller('firstController',['$scope',function ($scope) { $scope.name = 'Alrale'; }]);