溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
小編給大家分享一下Angular1.x自定義指令的示例分析，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！
具體如下：
調用Module.directive方法，傳入指令名稱和工廠函數，返回一個對象。
指令名稱中每個大寫字母會被認為是屬性名中的一個獨立的詞，而每個詞之間是以一個連字符分隔的。
var myApp = angular.module('myApp', [])
.directive("unorderedList", function () {
return function(scope, element, attrs) {
};
});返回鏈式函數
<!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">
<h4>Products</h4>
</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>打破對數據屬性的依賴
設置一個元素屬性，用來動態第設置需要參加運算的鍵。如果屬性名是以data-為前綴的，AngularJS會在生成傳給連接函數的屬性集合時移除這一前綴。也就是說data-list-property和list-property都會被表示為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]) );
}
}計算表達式
<div unordered-list="products" list-property="price | currency"></div>
添加過濾器后，自定義指令被破壞了。可以讓作用域將屬性值當做一個表達式進行計算。scope.$eval()接收兩個參數：要計算的表達式和需要用于執行該計算的任意本地數據。
listElem.append( angular.element('<li>').text(scope.$eval(propertyName, data[i])) );處理數據變化
<div class="panel-body"> <button class="btn btn-primary" ng-click="incrementPrices()"> Change Prices </button> </div>
$scope.incrementPrices = function () {
for(var i=0,len = $scope.products.length; i<len; i++){
$scope.products[i].price++;
}
}添加監聽器
if(angular.isArray(data)){
var listElem = angular.element("<ul>");
element.append(listElem);
for(var i=0, len=data.length; i<len; i++){
var itemElem = angular.element('<li>');
listElem.append(itemElem);
var watchFn = function (watchScope) {
return watchScope.$eval(propertyName, data[i]);
};
scope.$watch(watchFn, function (newValue, oldValue) {
itemElem.text(newValue);
});
}
}第一個函數(監聽器函數)基于作用域中的數據計算出一個值，該函數在每次作用域發生變化時都會被調用。如果該函數的返回值發生了變化，處理函數就會被調用，這個過程就像字符串表達式方式一樣。提供一個函數來監聽，能夠從容地面對表達式中有可能帶有過濾器的數據值得情形。
第二個監聽器函數是針對$eval()計算的表達變化，來執行回調函數的。
以上代碼并不能正確顯示，涉及到for循環閉包問題。
for(var i=0, len=data.length; i<len; i++){
(function () {
var itemElem = angular.element('<li>');
listElem.append(itemElem);
var index = i;
var watchFn = function (watchScope) {
return watchScope.$eval(propertyName, data[index]);
};
scope.$watch(watchFn, function (newValue, oldValue) {
itemElem.text(newValue);
});
}());
}或者
(function (i) {
var itemElem = angular.element('<li>');
listElem.append(itemElem);
var watchFn = function (watchScope) {
return watchScope.$eval(propertyName, data[i]);
};
scope.$watch(watchFn, function (newValue, oldValue) {
itemElem.text(newValue);
});
})(i);jqLite
jqLite中element()、append()等方法的參數是HTML string or DOMElement。
return function (scope, element, attrs) {
var listElem = element.append("<ol>");
for (var i = 0; i < scope.names.length; i++) {
listElem.append("<li>").append("<span>").text(scope.names[i]);
}
}上述添加的是字符串，最后添加只有scope.names中最后一條信息。
return function (scope, element, attrs) {
var listElem = angular.element("<ol>");
element.append(listElem);
for (var i = 0; i < scope.names.length; i++) {
listElem.append(angular.element("<li>")
.append(angular.element("<span>").text(scope.names[i])));
}
}以上是“Angular1.x自定義指令的示例分析”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
