学习要点
•为什么使用指令
•创建自定义指令
•使用jqLite工作
一、为什么使用自定义指令
NG内置了许多自定义指令，但是它们有时并不能满足你的要求，这是需要我们创建自定义属性。
二、自定义指令
接下来，我们来做一个小案例，当鼠标单击加价后，列表项自动递增，当然列表也是通过指令自动添加的，它本就是一个空的div
<!DOCTYPE> <!-- use module --> <html ng-app="exampleApp"> <head> <title>Angluar test</title> <meta charset="utf-8"/> <link type="text/css" href="https://www.jb51.net/css/bootstrap.min.css"> <link type="text/css" href="https://www.jb51.net/css/bootstrap-theme.min.css"> </head> <body> <dlv ng-controller="defaultCtrl"> <div> <h3>Products</h3> </div> <div> <!-- 点击加价，价格递增 --> <button type="button" ng-click="incrementPrices()">加价</button> </div> <div> <!-- 将products数据以一种无序列表的形式展示 --> <!-- list-property="price | currency" 列表项单位本地化 --> <div unorderlist="products" list-property="price | currency"></div> </div> </dlv> <script type="text/javascript" src="https://www.jb51.net/js/angular.min.js"></script> <script type="text/javascript"> angular.module("exampleApp", []) .directive("unorderlist", function () { // scope 作用域 // element 应用该指令的元素 // attrs 使用该指令的元素的属性 return function (scope, element, attrs) { // attrs['unorderlist'] 获取unorderlist属性值，这里为products // 获取数据模型值，这里为scope.products var data = scope[attrs['unorderlist']]; // 创建一个<ul>标签元素 var ul = angular.element("<ul>"); // 在应用该指令的元素中添加<ul> element.append(ul); // 获取listProperty属性值，这里为price | currency var expression = attrs['listProperty']; // 判断是否为数组 if (angular.isArray(data)) { // 遍历数据模型scope.products for (var i = 0; i < data.length; i++) { // 添加闭包,将i传递进去 (function (index) { // 创建一个<li>标签元素 var li = angular.element("<li>"); // 将<li>标签添加到<ul>中 ul.append(li); // 监听器函数，用$eval计算表达式和data[index]的值 var watcherFn = function (watchScope) { return watchScope.$eval(expression, data[index]); } // 添加$watch监听器监听作用域的变化 scope.$watch(watcherFn, function (newValue, oldValue) { // 更新li的值 li.text(newValue); }) })(i); } } } }) .controller("defaultCtrl", function ($scope) { // 数据模型 $scope.products = [ { name: "Apples", category: "Fruit", price: 1.20, expiry: 10 }, { name: "Bananas", category: "Fruit", price: 2.42, expiry: 7 }, { name: "Pears", category: "Fruit", price: 2.02, expiry: 6 } ]; // 递增价格 $scope.incrementPrices = function () { for (var i = 0; i < $scope.products.length; i++) { $scope.products[i].price++; } } }) </script> </body> </html>
解析：
第一步：创建控制器，添加数据模型products和递增价格incrementPrices()方法
第二步：自定义unorderlist标签，该标签的作用是：通过作用域数据模型的值，将其值以无序列表的方式展示出来
第三部：并且在单击加价按钮时，无序列表的值会依次递增
三、使用jqLite工作
NG内置了jqLite，它是JQuery的缩小版
<!DOCTYPE> <!-- use module --> <html ng-app="exampleApp"> <head> <title>Angluar test</title> <meta charset="utf-8"/> <link type="text/css" href="https://www.jb51.net/css/bootstrap.min.css"> <link type="text/css" href="https://www.jb51.net/css/bootstrap-theme.min.css"> </head> <body> <dlv> <!-- 使用自定义指令 --> <ol dome-directive> <li>Apples</li> <ul> <li>Bananas</li> <li>Cherries</li> <li>Oranges</li> </ul> <li>Pears</li> <li>Oranges</li> </ol> </dlv> <script type="text/javascript" src="https://www.jb51.net/js/angular.min.js"></script> <script type="text/javascript"> angular.module("exampleApp", []) .directive("domeDirective", function () { return function (scope, element, attrs) { // 找出element元素下所有的li,这里的element是调用者<ol> var items = element.find("li"); // 要所有的li的font-weight为bold items.css("font-weight", "bold"); // 遍历li, 值为Oranges的字体颜色为red,其余为green for (var i = 0; i < items.length; i++) { if (items.eq(i).text() == "Oranges"){ items.eq(i).css("color", "red"); } else { items.eq(i).css("color", "green"); } } // 打印出li的长度和字体颜色 console.log("Items length : " + items.length); console.log("Color: " + items.css("color")); } }) </script> </body> </html>