代码样例
angular.module('docsTransclusionExample', []) .controller('Controller', ['$scope', function($scope) { $scope.name = 'Tobias'; }]) .directive('myDialog', function() { return { restrict: 'E', transclude: true, scope: {}, templateUrl: 'my-dialog.html', link: function (scope, element) { scope.name = 'Jeff'; } }; });
restrict
- E: 表示该directive仅能以element方式使用,即:
- A: 表示该directive仅能以attribute方式使用,即:
- EA: 表示该directive既能以element方式使用,也能以attribute方式使用
transclude
你的directive可能接受页面上的其他html内容时才会用到,建议你先去掉该参数。有些高阶了。- scope
当你写上该属性时,就表示这个directive不会从它的controller里继承$scope对象,而是会重新创建一个。 - templateUrl
你的directive里的html内容 link:function(scope,element,attr,ctrl,linker)
可以简单理解为,当directive被angular 编译后,执行该方法- scope:指令所在的作用域
- element:指令元素的封装,可以调用angular封装的简装jq方法和属性
attr:指令元素的属性的集合,例如:你在页面上如果这样写了directive:
<my-dialog type="modal" animation="fade"></my-dialog>
那attrs就是:{ type: 'modal', animation: 'fade' }
- ctrl:用于调用其他指令的方法,指令之间的互相通信使用,需要配合require
- linker:用于transClude里面嵌入的内容
angularjs directive属性解析
最新推荐文章于 2024-07-08 09:47:39 发布