學習要點
•為什么使用指令
•創建自定義指令
•使用jqLite工作
一、為什么使用自定義指令
NG內置了許多自定義指令，但是它們有時并不能滿足你的要求，這是需要我們創建自定義屬性。
二、自定義指令
接下來，我們來做一個小案例，當鼠標單擊加價后，列表項自動遞增，當然列表也是通過指令自動添加的，它本就是一個空的div
<!DOCTYPE><!-- use module --><html ng-app="exampleApp"><head> <title>Angluar test</title> <meta charset="utf-8"/> <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"> <link rel="stylesheet" type="text/css" href="css/bootstrap-theme.min.css"></head><body> <dlv class="panel panel-default" ng-controller="defaultCtrl"> <div class="panel-heading"> <h3>Products</h3> </div> <div class="panel-body"> <!-- 點擊加價，價格遞增 --> <button type="button" class="btn btn-primary" ng-click="incrementPrices()">加價</button> </div> <div class="panel-body"> <!-- 將products數據以一種無序列表的形式展示 --> <!-- list-property="price | currency" 列表項單位本地化 --> <div unorderlist="products" list-property="price | currency"></div> </div> </dlv><script type="text/javascript" src="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 rel="stylesheet" type="text/css" href="css/bootstrap.min.css"> <link rel="stylesheet" type="text/css" href="css/bootstrap-theme.min.css"></head><body> <dlv class="panel panel-default"> <!-- 使用自定義指令 --> <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="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>解析：
第一步：自定義控制器，定義數據模型names
第二步：自定義指令，功能是將使用指令的元素下的所有li找出，并且更加值的不同賦給字體不同的顏色
第三步：在視圖中調用并且使用指令
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
