AngularJs directive指令详解
|
对于指令，可以把它简单的理解成在特定DOM元素上运行的函数，指令可以扩展这个元素的功能。 angular.module('myApp',[])
.directive('myDirective',function() {
return {
restrict: String,priority: Number,terminal: Boolean,template: String or Template Function: function(tElement,tAttrs) {...},templateUrl: String,replace: Boolean or String,scope: Boolean or Object,transclude: Boolean,controller: String or function(scope,element,attrs,transclude,otherInjectables) { ... },controllerAs: String,require: String,link: function(scope,iElement,iAttrs) { ... },compile: // 返回一个对象或连接函数，如下所示：
function(tElement,tAttrs,transclude) {
return {
pre: function(scope,iAttrs,controller) { ... },post: function(scope,controller) { ... }
}
return function postLink(...) { ... }
}
};
});
restrict[string] restrict:说明指令在HTML中的应用形式，备选项有"A"、"E" 和 "C"， "M" ，分别代表 attribute、element、class和comment(注释)，（默认值为"A"）。 priority[int] 大多数指令会忽略这个参数，使用默认值0，但也有些场景设置高优先级是非常重要甚至是必须的。例如，ngRepeat将这个参数设置为1000，这样就可以保证在同一元素上，它总是在其他指令之前被调用。 terminal[bool] template[string or function] templateUrl[string or function] replace[bool] scope参数[bool or object] transclude controller[string or function] <div id="aDiv"class="box"></div>
具有如下的属性对象：
{
id: "aDiv",class: "box"
} 4. $transclude 嵌入链接函数会与对应的嵌入作用域进行预绑定。transclude链接函数是实际被执行用来克隆元素和操作DOM的函数。
controllerAs[string] controllerAs参数用来设置控制器的别名，这样就可以在视图中引用控制器甚至无需注入$scope。 <div ng-controller="MainController as main">
<input type="text" ng-model="main.name" />
<span>{{ main.name }}</span>
</div> JsCode:
angular.module('myApp',[])
.controller('MainController',function () {
this.name = "Halower";
});控制器的别名使路由和指令具有创建匿名控制器的强大能力。这种能力可以将动态的对象创建成为控制器，并且这个对象是隔离的、易于测试。
require[string or string[]]
compile【object or function】
compile选项本身并不会被频繁使用，但是link函数则会被经常使用。本质上，当我们设置了link选项，实际上是创建了一个postLink() 链接函数，以便compile() 函数可以定义链接函数。通常情况下，如果设置了compile函数，说明我们希望在指令和实时数据被放到DOM中之前进行DOM操作，在这个函数中进行诸如添加和删除节点等DOM操作是安全的。 compile和link选项是互斥的。如果同时设置了这两个选项，那么会把compile所返回的函数当作链接函数，而link选项本身则会被忽略。 编译函数负责对模板DOM进行转换。链接函数负责将作用域和DOM进行链接。 在作用域同DOM链接之前可以手动操作DOM。在实践中，编写自定义指令时这种操作是非常罕见的，但有几个内置指令提供了这样的功能。
link
link: function (scope,controller) {…} 链接函数是可选的。如果定义了编译函数，它会返回链接函数，因此当两个函数都定义时，编译函数会重载链接函数。如果我们的指令很简单，并且不需要额外的设置，可以从工厂函数（回调函数）返回一个函数来代替对象。如果这样做了，这个函数就是链接函数。 link: 该方法在指令中扮演着重要的角色。它负责执行DOM 操作和注册事件监听器等。link 方法包含以下参数： scope: 指令Scope的引用。scope 变量在初始化时是不被定义的，link 方法会注册监视器监视值变化事件。 element: 包含指令的DOM元素的引用， link 方法一般通过jQuery 操作实例（如果没有加载jQuery，还可以使用Angular's jqLite ）。 controller: 在有嵌套指令的情况下使用。这个参数作用在于把子指令的引用提供给父指令，允许指令之间进行交互， tab 指令就是使用该参数较典型的例子：http://jsfiddle.net/powertoolsteam/GBE7N/1/ 注意，当调用link 方法时， 通过值传递（"@"）的scope 变量将不会被初始化，它们将会在指令的生命周期中另一个时间点进行初始化，如果你需要监听这个事件，可以使用scope.$watch 方法。 转自：http://www.cnblogs.com/rohelm/p/4051437.html （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |