多应用+插件架构,代码干净,二开方便,首家独创一键云编译技术,文档视频完善,免费商用码云13.8K 广告
# Comprehensive Directive API > Directive Definition Object: ```javascript var myModule = angular.module(...); myModule.directive('directiveName', function factory(injectables) { var directiveDefinitionObject = { priority: 0, template: '<div></div>', // or // function(tElement, tAttrs) { ... }, // or // templateUrl: 'directive.html', // or // function(tElement, tAttrs) { ... }, transclude: false, restrict: 'A', templateNamespace: 'html', scope: false, controller: function($scope, $element, $attrs, $transclude, otherInjectables) { ... }, controllerAs: 'stringIdentifier', bindToController: false, require: 'siblingDirectiveName', // or // ['^parentDirectiveName', '?optionalDirectiveName', '?^optionalParent'], multiElement: false, compile: function compile(tElement, tAttrs, transclude) { return { pre: function preLink(scope, iElement, iAttrs, controller) { ... }, post: function postLink(scope, iElement, iAttrs, controller) { ... } } // or // return function postLink( ... ) { ... } }, // or // link: { // pre: function preLink(scope, iElement, iAttrs, controller) { ... }, // post: function postLink(scope, iElement, iAttrs, controller) { ... } // } // or // link: function postLink( ... ) { ... } }; return directiveDefinitionObject; }); ``` ## 属性详情 > `multiElement` > `priority` 当一个DOM元素上定义了多个指令并被同时应用时,指令的执行顺序显得尤为重要。指令在被编译之前,会根据`priority`指定的数值进行排序。`priorty`接收一个数字作为值,并且值越大,代表其优先级超高,就会被优先执行。`pre-link`函数同样也按照`priory`指定的顺序执行,不同点在于它是按逆序执行。相同优先级的指令顺序是 undefined 。priority 的默认值是 0. > `terminal` > `scope` > `bindToController` > `controller` > `require` 获取另外一个指令并且将其控件器作为第4个参数注入到当前指令的 `link` 函数中。`require` 属性接受一个字体串,数组或者对象作为参数。 - 一个**字符串**, 包含了传入 `link` 函数的指令的名称。 - 一个**数组**,包含了一组需要传递到 `link` 函数的指令的名称,参数的顺序必需和 `require` 中的名字保持一致。 - 一个**对象**,它的属性值为传入 `link` 函数的指令的名称。传入到 `link` 函数的参数同样也可以是一个匹配的对象,其属性值包含相应的控件器名称。 > `controllerAs` > `restrict` 用于限制指令的声明类型,值为 `EACM` 中的某一个字符。如果忽略不传,使用默认(元素和属性)方式。 - `E` - 元素名(默认): `<my-directive></my-directive>` - `A` - 属性名(默认): `<div my-directive="exp"></div>` - `C` - 类名: `<div class="my-directive: exp;"></div>` - `M` - 注释: `<!-- directive: my-directive exp -- >` > `templateNamespace` > `template` > `templateUrl` > `replace` > `transclude` > `compile` > `link`