angular.module('freefedApp',[]).directive(name,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 orfunction(scope, element, attrs, transclude, otherInjectables) { ... }, controllerAs: String, require: String, link: function(scope, iElement, iAttrs) { ... }, }; });
指令作用域
DOM中每个指令调用时都可能会:
作用域scope设置(参数是可选的,默认值是false):
作用域绑定策略对于指令隔离作用域angularJS提供了几种方法能够将指令内部的隔离作用域,同指令外部的作用域进行数据绑定
demo.html angular应用demo 发送邮件地址 : 接收邮件地址 :
app.js module = angular.module('freefedApp',[]); module.controller('freefedCtrl',['$scope',function($scope){ $scope.from = 'zhangzhen@hoge.cn'; $scope.sendMail = function(email){ alert('我将发送邮件到' + email); }; }]); module.directive('emailDirective',function(){ return { scope : { fromEmail : '@' //值绑定 toEmail : '=' //和父级作用域属性进行双向绑定 onSend : '&' //与父级作用域进行绑定 }, link : function( scope,el,attr ){ scope.onSend( { email : scope. toEmail} ); //调用与onSend绑定的父级作用域的sendMail函数，并传递参数email的值给它 } }; });
指令参数详解C(类名)
M(注释)
terminal: Boolean,
这个参数用来告诉angularJS停止运行当前元素上比本指令优先级低的指令。但同当前指令 优先级相同的指令还是会被执行。 如果元素上某个指令设置了terminal参数并具有较高的优先级,就不要再用其他低优先级的 指令对其进行修饰了,因为不会被调用。 但是具有相同优先级的指令还是会被继续调用。使用了terminal参数的例子是ngView和ngIf。ngIf的优先级略高于ngView,如果ngIf的表 达式值为true, ngView就可以被正常执行,但如果ngIf表达式的值为false,由于ngView的优先 级较低就不会被执行template: String or Template Function:function(tElement, tAttrs) (...},
template参数是可选的,必须被设置为以下两种形式之一: 一段HTML文本; 一个可以接受两个参数的函数,参数为tElement和tAttrs,并返回一个代表模板的字符 串。tElement和tAttrs中的t代表template,是相对于instance的。在讨论链接和编译 设置时会详细介绍,模板元素或属性与实例元素或属性之间的区别。 angularJS会同处理HTML一样处理模板字符串。模板中可以通过大括号标记来访问作用域, 例如{{ expression }}。 如果模板字符串中含有多个DOM元素,或者只由一个单独的文本节点构成,那它必须被包 含在一个父元素内。换句话说,必须存在一个根DOM元素: template: '\ <div> <-- single root element -->\ <a href="http://google.com">Click me</a>\ <h1>When using two elements, wrap them in a parent element</h1>\ </div>\ 另外,注意每一行末尾的反斜线,这样angularJS才能正确解析多行字符串。在实际生产中, 更好的选择是使用templateUrl参数引用外部模板templateUrl: String,
templateUrl是可选的参数,可以是以下类型: 一个代表外部HTML文件路径的字符串; 一个可以接受两个参数的函数,参数为tElement和tAttrs,并返回一个外部HTML文件路径的字符串, 默认情况下,调用指令时会在后台通过Ajax来请求HTML模板文件 模板加载是异步的,意味着编译和链接要暂停,等待模板加载完成。 通过Ajax异步加载大量的模板将严重拖慢一个客户端应用的速度。为了避免延迟,可以在部 署应用之前对HTML模板进行缓存。 在大多数场景下缓存都是一个非常好的选择, 因为angularJS 通过减少请求数量提升了性能。模板加载后,angularJS会将它默认缓存到$templateCache服务中。 在实际生产中,可以提前将模板缓存到一个定义模板的JavaScript文件中,这样就不需要通过XHR来加载模板了replace: Boolean or String,
replace是一个可选参数,如果设置了这个参数,值必须为true,因为默认值为false。 默认值意味着模板会被当作子元素插入到调用此指令的元素内部: <div some-directive></div> .directive('someDirective', function() { return { template: '<div>some stuff here<div>' }; }); 调用指令之后的结果如下(这是默认replace为false时的情况): <div some-directive> <div>some stuff here<div> </div> 如果replace被设置为了true: .directive('someDirective', function() { return { replace: true // 修饰过 template: '<div>some stuff here<div>' }; }); 指令调用后的结果将是: <div>some stuff here<div>scope: Boolean or Object,
看上面指令作用域transclude: Boolean,
相关文章
精彩导读
热门资讯
关注我们
