自定義屬性的四種類別
分為： 元素E，屬性A，注釋M，類C , 分別如下：
<my-dir></my-dir> <span my-dir="exp"></span> <!-- directive: my-dir exp --> <span class="my-dir: exp;"></span>
簡單創(chuàng)建一個指令
html結(jié)構(gòu)：
<div ng-controller="myCtrl"> <div my-customer></div></div>
JavaScript結(jié)構(gòu)：
angular.module('myApp', []) .controller('myCtrl', ['$scope', function($scope) { $scope.customer = { name: 'Naomi', address: '1600 Amphitheatre' }; }]) .directive('myCustomer', function() { return { template: 'Name: {{customer.name}} Address: {{customer.address}}' }; });輸出：
Name: Naomi Address: 1600 Amphitheatre
說明： 此處，myCtrl 中定義的 $scope.customer 屬性和屬性值都在指令中的模板使用了。同樣的，在指令return 對象中的 template 也可被替換成一路徑，在路徑html中書寫和template中同樣的代碼，使用這種方式，可以操作更多代碼。
templateUrl 函數(shù)式編程
html結(jié)構(gòu)：
<div ng-controller="myCtrl"> <div my-customer></div></div>
javascript結(jié)構(gòu)：
angular.module('myApp', []) .controller('myCtrl', ['$scope', function($scope) { $scope.customer = { name: 'Naomi', address: '1600 Amphitheatre' }; }]) .directive('myCustomer', function() { return { templateUrl: function(elem, attr) { return 'customer-' + attr.type + '.html'; } }; });不同的templateUrl ①
Name: {{customer.name}}不同的templateUrl ②
Address: {{customer.address}}輸出結(jié)果：
Name: Naomi
Address: 1600 Amphitheatre
說明： templateUrl 的值可以是一個函數(shù)返回值，返回用于指令中的html模板的url。
隔離指令的作用域
① 通過不同的controller
html結(jié)構(gòu)：
<div ng-app="myApp"> <div ng-controller="myCtrl1"> <my-customer></my-customer> </div> <div ng-controller="myCtrl2"> <my-customer></my-customer> </div></div>
javascript結(jié)構(gòu)：
angular.module('myApp', []) .controller('myCtrl1', ['$scope', function($scope) { $scope.customer = { name: 'Naomi', address: '1600 Amphitheatre' }; }]) .controller('myCtrl2', ['$scope', function($scope) { $scope.customer = { name: 'Igor', address: '123 Somewhere' }; }]) .directive('myCustomer', function() { return { restrict: 'E', templateUrl: 'my-customer.html' }; });templateUrl html 結(jié)構(gòu)：
Name: {{customer.name}} Address: {{customer.address}}輸出結(jié)果：
Name: Naomi Address: 1600 Amphitheatre
Name: Igor Address: 123 Somewhere
說明： 可見 不同的controller 有不同的作用范圍。雖然指令一樣，每次渲染都是分離的，所以我們可以抽象出來指令，用于html模板和代碼的重用,封裝。但是這樣又不是很好，因為用了兩個controller，我們可以使用指令中的scope而不是controller里的scope來替代，具體做法是將外部的scope 映射到指令內(nèi)部的scope, 如下：
② 通過指令屬性映射scope
html結(jié)構(gòu)：
<div ng-app="myApp" ng-controller="myCtrl"> <my-customer info="naomi"></my-customer> <my-customer info="igor"></my-customer></div>
javascript 結(jié)構(gòu)：
angular.module('myApp', []) .controller('myCtrl', ['$scope', function($scope) { $scope.naomi = { name: 'Naomi', address: '1600 Amphitheatre' }; $scope.igor = { name: 'Igor', address: '123 Somewhere' }; }]) .directive('myCustomer', function() { return { restrict: 'E', scope: { customerInfo: '=info' }, templateUrl: 'my-customer-iso.html' }; });templateUrl html結(jié)構(gòu)：
Name: {{customerInfo.name}} Address: {{customerInfo.address}}編譯后的html結(jié)果：
Name: Naomi Address: 1600 Amphitheatre
Name: Igor Address: 123 Somewhere
③ 指令中的如果定義scope屬性則html中的scope不會直接繼承controller中的scope，在html中使用的都需要在scope:{}中聲明，否則就是undefined
html 結(jié)構(gòu)：
<div ng-app="myApp" ng-controller="myCtrl"> <my-customer info="naomi"></my-customer> </div>
javascript結(jié)構(gòu)：
angular.module('myApp', []) .controller('myCtrl', ['$scope', function($scope) { $scope.naomi = { name: 'Naomi', address: '1600 Amphitheatre' }; $scope.vojta = { name: 'Vojta', address: '3456 Somewhere Else' }; }]) .directive('myCustomer', function() { return { restrict: 'E', scope: { customerInfo: '=info' }, templateUrl: 'my-customer-plus-vojta.html' }; });templateUrl html結(jié)構(gòu)：
Name: {{customerInfo.name}} Address: {{customerInfo.address}}<br>Name: {{vojta.name}} Address: {{vojta.address}}html編譯后的結(jié)果：
Name: Naomi Address: 1600 Amphitheatre
Name: Address:
說明： vojta 在指令中的scope沒有被定義，不會直接繼承在controller中的，那么他就是undefined，所以就是空白(什么都不顯示)
可操作DOM的指令
創(chuàng)建一個用于操作dom的指令，如果需要dom操作也都應(yīng)該放在指令里。
html 結(jié)構(gòu)：
<div ng-app="myApp" ng-controller="myCtrl"> Date format: <input ng-model="format"> <hr/> Current time is: <span my-current-time="format"></span> </div>
javascript結(jié)構(gòu)：
angular.module('myApp', []) .controller('myCtrl', ['$scope', function($scope) { $scope.format = 'M/d/yy h:mm:ss a'; }]) .directive('myCurrentTime', function($interval, dateFilter) { return { restrict: 'AE', link: function(scope, element, attr){ var format, timeoutId; /* 更新時間函數(shù) */ function updateTime() { element.text(dateFilter(new Date(), format)); } /* 監(jiān)視時間格式的改變 */ var attrWatch = scope.$watch(attrs.myCurrentTime, function(value) { format = value; updateTime(); }); /* 定時器 */ timeoutId = $interval(function() { updateTime(); // update DOM }, 1000); /* 頁面跳轉(zhuǎn)后移除定時器防止內(nèi)存泄露 */ element.on('$destroy', function() { $interval.cancel(timeoutId); attrWatch(); // 移除watch }); } }; });說明： 在link函數(shù)中，操作dom節(jié)點，讓dom的文本節(jié)點動態(tài)顯示時間跳動。在頁面跳轉(zhuǎn)之后及時清除定時器和監(jiān)視器以免發(fā)生內(nèi)存泄漏。
通過transclude和ng-transclude創(chuàng)建可包裹其他元素的指令
html結(jié)構(gòu)：
<div ng-app="myApp" ng-controller="myCtrl"> <my-dialog>Check out the contents, {{name}}!</my-dialog> </div>javascript結(jié)構(gòu)：
angular.module('myApp', []) .controller('myCtrl', ['$scope', function($scope) { $scope.name = 'Tobias'; }]) .directive('myDialog', function() { return { restrict: 'E', transclude: true, scope: {}, templateUrl: 'my-dialog.html', link: function(scope) { scope.name = 'Jeff'; } };});templateUrl html 結(jié)構(gòu)：
<div class="alert" ng-transclude></div>
編譯后的html結(jié)構(gòu)：
Check out the contents, Tobias!
說明： 指令中的scope本應(yīng)隔離controller中的作用域的，但是由于設(shè)置了transclude=true選項，scope就會繼承controller中的定義，所以最終是Tobias而不是Jeff。
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持武林網(wǎng)。
新聞熱點
疑難解答
