angular自定义指令基础

你可以向模块注册一个指令，像这样:

<!-- lang: js -->
myapp = angular.module("myapp", []);

myapp.directive(‘div‘, function() {
    var directive = {};

    directive.restrict = ‘E‘; /* restrict this directive to elements */

    directive.template = "My first directive: {{textToInsert}}";

    return directive;
});

来看模块中调用的 directive() 函数。当你调用该函数时，意味着你要注册一个新指令。directive() 函数的第一个参数是新注册指令的名称。这是之后你在 HTML 模板中调用它的时候用的名称。例子中，我用了 ‘div‘ ，意思是说当 HTML 模板每次在找到 HTML 元素类型是 div 的时候，这个指令都会被激活。

传递给 directive 函数的第二个参数是一个工厂函数。调用该函数会返回一个指令的定义。 AngularJS 通过调用该函数来获取包含指令定义的 Javascript 对象。如果你有仔细看上面的例子，你会知道它返回的确是是一个 Javascript 对象。

这个从工厂函数中返回的 Javascript 对象有两个属性: restrict 和 template 字段。

restrict 字段用来设置指令何时被激活，是匹配到 HTML 元素时，还是匹配到元素属性时。也就是指令类型。把restrict 设置为 E 时，只有名为 div 的 HTML 元素才会激活该指令。把 restrict 设置为 A 时，只有名为 div的 HTML 元素属性才会激活该指令。你也可以用 AE ，这样会使得匹配到元素名和元素属性名时，都可以激活该指令。

template 字段是一个 HTML 模板，用来替换匹配的 div 元素。它会把匹配到的 div 当成一个占位符，然后用 HTML 模板在同一位置来替换掉它。也就是说，HTML 模板替换匹配的到 HTML 元素。

比如说你的 HTML 页面有这样一段 HTML:

<!-- lang: js -->
<div ng-controller="MyController" >
    <div>This div will be replaced</div>
</div>

当 AngularJS 找到内嵌的 div 的时候，会激活自定义的指令。然后把该 div 元素替换掉，替换后的 HTML 将变成这样:

<!-- lang: js -->
My first directive: {{textToInsert}}

然后你看到了，这段 HTML 里面包含了一个内插指令 ({{textToInsert}})。AngularJS 会再执行一次，让内插指令实际值显示出来。然后 $scope.textToInsert 属性将会在这个 HTML 点上替换掉内插指令占位符。