本文實(shí)例講述了Angular1.x自定義指令。分享給大家供大家參考，具體如下：
調(diào)用Module.directive方法，傳入指令名稱和工廠函數(shù)，返回一個(gè)對(duì)象。
指令名稱中每個(gè)大寫字母會(huì)被認(rèn)為是屬性名中的一個(gè)獨(dú)立的詞，而每個(gè)詞之間是以一個(gè)連字符分隔的。
var myApp = angular.module('myApp', []) .directive("unorderedList", function () { return function(scope, element, attrs) { }; });返回鏈?zhǔn)胶瘮?shù)
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>AngularJS Demo</title> <link rel="stylesheet" href="../css/bootstrap.css" rel="external nofollow" /> <link rel="stylesheet" href="../css/bootstrap-theme.css" rel="external nofollow" > <script src="../js/angular.js"></script></head><body ng-app="myApp" ng-controller="myCtrl"> <div class="panel panel-default"> <div class="panel-heading"> <h3>Products</h3> </div> <div class="panel-body"> <div unordered-list="products"></div> </div> </div></body><script>var myApp = angular.module('myApp', []) .controller('myCtrl', ["$scope", 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 } ]; }]) .directive("unorderedList", function () { return function (scope, element, attrs) { var data = scope[attrs['unorderedList']]; if( angular.isArray(data) ){ for(var i=0, len=data.length; i<len; i++){ console.log(data[i].name); } } }; });</script></html>打破對(duì)數(shù)據(jù)屬性的依賴
設(shè)置一個(gè)元素屬性，用來動(dòng)態(tài)第設(shè)置需要參加運(yùn)算的鍵。如果屬性名是以data-為前綴的，AngularJS會(huì)在生成傳給連接函數(shù)的屬性集合時(shí)移除這一前綴。也就是說data-list-property和list-property都會(huì)被表示為listProperty。
<div unordered-list="products" list-property="name"></div>
var data = scope[attrs['unorderedList']];var propertyName = attrs['listProperty'];if(angular.isArray(data)){ var listElem = angular.element("<ul>"); element.append(listElem); for(var i=0, len=data.length; i<len; i++){ listElem.append( angular.element('<li>').text(data[i][propertyName]) ); }}計(jì)算表達(dá)式
<div unordered-list="products" list-property="price | currency"></div>
添加過濾器后，自定義指令被破壞了。可以讓作用域?qū)傩灾诞?dāng)做一個(gè)表達(dá)式進(jìn)行計(jì)算。scope.$eval()接收兩個(gè)參數(shù)：要計(jì)算的表達(dá)式和需要用于執(zhí)行該計(jì)算的任意本地?cái)?shù)據(jù)。
新聞熱點(diǎn)
疑難解答
圖片精選
