本文实例讲述了AngularJS自定义控件。分享给大家供大家参考，具体如下：
自定义指令介绍
AngularJS 指令作用是在 AngulaJS 应用中操作 Html 渲染。比如说，内插指令 ( {{ }} ), ng-repeat 指令以及 ng-if 指令。
当然你也可以实现自己的。这就是 AngularJS 所谓的"教会 HTML 玩新姿势”。本文将告诉你如何做到。
指令类型
可以自定义的指令类型如下:
元素
属性
CSS class
Comment directives
这里面，AngularJS 强烈建议你用元素和属性类型，而不用 CSS class 和 comment directives (除非迫不得已)。
指令类型决定了指令何时被激活。当 AngularJS 在 HTML 模板中找到一个 HTML 元素的时候，元素指令被激活。当 AngularJS 找到一个 HTML 元素属性时，属性指令被激活。当 AngularJS 找到一个 CSS class 时， CSS class 指令被激活，最后，当 AngularJS 找到 HTML comment 时，comment directive 被激活。
基础例子
你可以向模块注册一个指令，像这样:
<!-- 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;
});
</div>
来看模块中调用的 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></div>
当 AngularJS 找到内嵌的 div 的时候，会激活自定义的指令。然后把该 div 元素替换掉，替换后的 HTML 将变成这样:
<!-- lang: js -->
My first directive: {{textToInsert}}
</div>
然后你看到了，这段 HTML 里面包含了一个内插指令 ({{textToInsert}})。AngularJS 会再执行一次，让内插指令实际值显示出来。然后 $scope.textToInsert 属性将会在这个 HTML 点上替换掉内插指令占位符。
template 和 templateUrl 属性
创建自定义指令最简单的例子就是上面这样了。你的指令用来生成 HTML，然后你把 HTML 放到指令定义对象的 template 属性中。下面这个例子是上面那最简单的例子的重复，注意 template部分:
<!-- 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;
});
</div>
如果 HTML 模板越来越大，把它写在一个 Javascript 字符串中肯定非常难维护。你可以把它放到一个单独的文件中，然后 AngularJS 可以通过这个文件把它加载进来。然后再把 HTML 模板文件的 URL 放到指令定义对象的 templateUrl 属性中。下面是例子:
<!-- lang: js -->
myapp = angular.module("myapp", []);
myapp.directive('div', function() {
var directive = {};
directive.restrict = 'E'; /* restrict this directive to elements */
directive.templateUrl = "/myapp/html-templates/div-template.html";
return directive;
});
</div>
然后 AngularJS 会从 templateUrl 属性中设置的 URL 将 HTML 模板加载进来。
用独立的 HTML 模板文件，设置 templateUrl 属性，在你要创建更多的通用指令时会显得更加有用，比如说用来显示用户信息的指令。例子:
<!-- lang: js -->
myapp = angular.module("myapp", []);
myapp.directive('userinfo', function() {
var directive = {};
directive.restrict = 'E'; /* restrict this directive to elements */
directive.templateUrl = "/myapp/html-templates/userinfo-template.html";
return directive;
});
</div>
例子创建了一个指令，当AngularJS 找到一个 <userinfo> 元素的时候就会激活它。AngularJS 加载指向 /myapp/html-templates/userinfo-template.html 的模板并解析它，它就像从一开始就被嵌在上一级 HTML 文件中一样。
从指令中隔离 $scope
在上面的例子中，把 userinfo 指令硬绑定到了 $scope ，因为 HTML 模板是直接引用 textToInsert 属性的。直接引用 $scope 让指令在同一个 controller 中的时候，非常难复用，因为 $scope在同一个 controller 中的值都是一样的。比如说，你在页面的 HTML 中这样写的时候:
<!-- lang: js --> <userinfo></userinfo> <userinfo></userinfo></div>
这两个 <userinfo> 元素会被同样的 HTML 模板取代，然后绑定到同样的 $scope 变量上。结果就是两个 <userinfo> 元素将会被一模一样的 HTML 代码给替换了。
为了把两个 <userinfo> 元素绑定到 $scope 中的不同的值，你需要给 HTML 模板一个 isolate scope。
所谓 isolate scope 是绑定在指令上的独立的 scope 对象。下面是定义的例子:
<!-- lang: js -->
myapp.directive('userinfo', function() {
var directive = {};
directive.restrict = 'E';
directive.template = "User : {{user.firstName}} {{user.lastName}}";
directive.scope = {
user : "=user"
}
return directive;
})
</div>
请看 HTMl 模板中的两个内插指令 {{user.firstName}} 和 {{user.lastName}}。注意 user. 部分。以及directive.scope 属性。 directive.scope 是个带 user 属性的 Javascript 对象。于是directive.scope 就成为了 isolate scope 对象，现在 HTML 模板被绑到了 directive.scope.user 上(通过 {{user.firstName}} 和 {{user.lastName}} 内插指令)。
directive.scope.user 被设置为 “=user” 。意思是说 directive.scope.user 和 scope 中的属性绑在一起的(不是 isolate scope)，scope 中的属性通过 user 属性传入 <userinfo> 元素。听起来挺费劲的，直接看例子:
<!-- lang: js --> <userinfo user="jakob"></userinfo> <userinfo user="john"></userinfo></div>
这两个 <userinfo> 元素都有 user 属性。user 的值指向了 $scope 中同名属性，被指定的 $scope中的属性将在 userinfo 的 isolate scope object 中被使用。
下面是完整的例子:
<!-- lang: js -->
<userinfo user="jakob"></userinfo>
<userinfo user="john"></userinfo>
<script>
myapp.directive('userinfo', function() {
var directive = {};
directive.restrict = 'E';
directive.template = "User : <b>{{user.firstName}}</b> <b>{{user.lastName}}</b>";
directive.scope = {
user : "=user"
}
return directive;
});
myapp.controller("MyController", function($scope, $http) {
$scope.jakob = {};
$scope.jakob.firstName = "Jakob";
$scope.jakob.lastName = "Jenkov";
$scope.john = {};
$scope.john.firstName = "John";
$scope.john.lastName = "Doe"