angularjs知识点四指令

指令是AngularJS中最为重要的部分，所以这个框架本身也是自带了比较多的的指令，但是在开发中，这些指令通常不能满足我们的需要，所以我们也是需要自定义一些指令的，因此框架指令包含：

• 框架自身指令（ng-###）
• 自定义指令

对于指令，可以把它简单的理解成在特定DOM元素上运行的函数，指令可以扩展这个元素的功能。内置的指令肯定是系统自身定义的，那自定义指令怎么使用呢？AngularJS应用的模块中有很多方法可以使用，其中directive()这个方法是用来定义指令的。directive() 方法可以接受两个参数：
1. name（字符串）
指令的名字，用来在视图中引用特定的指令。
2. factory_function （函数）
这个函数返回一个对象，其中定义了指令的全部行为。$compile服务利用这个方法返回的对象，在DOM调用指令时来构造指令的行为。

当AngularJS启动应用时，它会把第一个参数当作一个字符串，并以此字符串为名来注册第二个参数返回的对象。AngularJS编译器会解析HTML的DOM中的元素、属性、注释和CSS类名中使用了这个名字的地方，并在这些地方引用对应的指令。当它找到某个已知的指令时，就会在页面中插入指令所对应的DOM元素。
来看一个最简单的指令：

angular.module('myApp',[]).directive('myDirective', function() {return {restrict: 'E',template: '<a href="http://google.com">Click me to go to Google</a>'};});

然后我们在html中的anjularjs应用下就可以用了，默认有四种使用方式，具体使用哪种看restrict的值：

<my-directive></my-directive><div my-directive></div><div class="my-directive"></div><!--directive:my-directive-->

默认情况下，AngularJS将模板生成的HTML代码嵌套在自定义标签内部，上边是最简单的指令，开发中使用的自定义的指令还有很多其他内部属性：

restrict（字符串）：告诉AngularJS这个指令在DOM中可以何种形式被声明，也就是在前端怎么使用这个指令。template（字符串或函数）：模板。templateUrl（字符串或函数）：模板url.replace（布尔型）:为true的时候，只把模板插入html。scope：指令作用域controller（字符串或函数）：controller参数可以是一个字符串或一个函数。当设置为字符串时，会以字符串的值为名字，来查找注册在应用中的控制器的构造函数。link：function(){}:这是个很重要的部分，它可以取得指令所在元素，并对他进行处理，比如绑定事件等。

稍微复杂的指令（向指令传递数据），我们先来回顾一下上面定义的指令，注意，我们在模板中硬编码了URL和链接文本：

template:'<a href="http://google.com"> Click me to go to Google</a>'

实际上，应该将上面的模板转换成可以接受两个变量的形式：一个变量是URL，另一个是链接文本：

template: '<a href="{{ myUrl }}">{{ myLinkText }}</a>'

那这要怎么做呢，直接肯定不行，angular提供了一种绑定策略：

<div my-directive    my-url="http://google.com"    my-link-text="Click me to go to Google"></div>angular.module('myApp', []).directive('myDirective', function() {    return {        restrict: 'A',        replace: true,        scope: {            myUrl: '@', //绑定策略            myLinkText: '@' //绑定策略        },    template: '<a href="{{myUrl}}">' +                '{{myLinkText}}</a>'        };});