AngularJS--自定义指令.docxVIP

/kavlez/p/4288885.htmlAngularJS - 自定义指令这一篇从自定义指令出发，记录了定义一个指令时影响指令行为的各种因素。试着感受这些因素，让自己更高效地编写AngularJS应用。?Directive先从定义一个简单的指令开始。 定义一个指令本质上是在HTML中通过元素、属性、类或注释来添加功能。AngularJS的内置指令都是以ng开头，如果想自定义指令，建议自定义一个前缀代表自己的命名空间。这里我们先使用my作为前缀:var myApp = angular.module(myApp, []) .directive(myDirective, function() { return { restrict: A, replace: true, template: pKavlez/p };})如此一来，我们可以这样使用，注意命名是camel-case:my-directive /!-- my-directivepKavlez/p/my-directive --directive()接受两个参数name：字符串，指令的名字factory_function：函数，指令的行为应用启动时，以name作为该应用的标识注册factory_function返回的对象。在factory_function中，我们可以设置一些选项来改变指令的行为。?下面记录一下定义指令时用到的选项?restrict （string）该属性用于定义指令以什么形式被使用，这是一个可选参数，本文开头定义的指令用的也是A，其实该选项默认为A。?也就是元素（E）、属性（A）、类（C）、注释（M）(ps:EMAC? EMACS? 挺好记哈)比如上面定义的myDirective，可以以任何形式调用。E（元素）my-directive/my-directiveA（属性，默认值）div my-directive=expression/divC（类名）div class=my-directive:expression;/divM（注释）--directive:my-directive expression--?priority (Number)也就是优先级，默认为0。在同一元素上声明了多个指令时，根据优先级决定哪个先被调用。?如果priority相同，则按声明顺序调用。另外，no-repeat是所有内置指令中优先级最高的。?terminal (Boolean)终端? 而且还是Boolean??被名字吓到了，其实terminal的意思是是否停止当前元素上比该指令优先级低的指令。 但是相同的优先级还是会执行。比如，我们在my-directive的基础上再加一个指令:.directive(momDirective,function($rootScope){ return{ priority:3, terminal:true };})调用发现my-directive不会生效:div mom-directive my-directive=content /div?template (String/Function)至少得输出点什么吧? 但template也是可选的。String类型时，template可以是一段HTML。Function类型时，template是一个接受两个参数的函数，分别为：tElementtAttrs函数返回一段字符串作为模板。?templateUrl (String/Function)这个就和上面的template很像了，只不过这次是通过URL请求一个模板。 String类型时，templateURL自然是一个URL。 Function类型时返回一段字符串作为模板URL。?replace (Boolean/String)默认值为false，以文章开头定义的指令为例，假设我们这样调用了指令my-directive/my-directive replace为true时，输出:pKavlez/preplace为false时，输出:my-directivepKavlez/p/my-directive ?transclude (Boolean)该选项默认为false，翻译过来叫嵌入，感觉还是有些生涩。template和scope已经可以做很多事情了，但有一点不足。比如在原有元素的基础上添加内容，transclude的例子如下:body ng-app=myApp textarea ng-model=content/textarea div my-directive title=Kavlez hr {{content}} /div/bodyscript type=text/javascriptvar myApp = angular.module(myApp, [