本篇文章跟大家介紹一下angular指令中的4種設計模式。有一定的參考價值，有需要的朋友可以參考一下，希望對大家有幫助。
【相關推薦：《angular教學》】
指令的功能集非常豐富，不過我們已經發現了指令的帕累托分佈：使用angular寫的大量指令只會用到可用性和設計模式中很小的比例，這些指令大概可以分為4類：
這些指令遵守一個簡單的設計模式：它們將監視變數並更新DOM元素，以反映變數的變化，如ngClass ，ngBind。
angular.module('app', []).
directive('myBackgroundImage', function () {
return function (scope, element, attrs) {
scope.$watch(attrs.myBackgroundImage, function (newVal, oldVal) {
element.css('background-image', 'url(' + ')');
});
}
});從高層次來看，事件處理程序指令可以透過呼叫$apply函數將DOM事件與資料綁定綁定在一起，如ngClick，下面類似的自訂click。
angular.module('app', []).
directive('myNgClick', function () {
return function (scope, element, attrs) {
element.click(function () {
scope.$eval(attrs.myNgClick);
scope.$apply();
});
}
});該模式同時使用了只渲染指令和事件處理程序模式，用於建立控制變數狀態的指令。
angular.module('app', []).
directive('myNgClick', function () {
return function (scope, element, attrs) {
//监视和更新
scope.$watch(attrs.toggleButton, function (v) {
element.val(!v ? 'Disable' : 'Enable');
});
//事件处理程序
element.click(function () {
scope[attrs.toggleButton] =
!scope[attrs.toggleButton];
scope.$apply();
});
}
});模板指令可以透過設定模板的選項來建構強大的指令，其實以上實例傳回的函數就相當於模板的link函數。
angular.module('app', []).
directive('imageCarousel', function () {
return {
templateUrl: 'view/index.html',
controller: carouselController,
scope: {},
link: function (scope, element, attrs) {
scope.$parent.$watch(attrs.imageCarousel, function (v){
scope.images = v;
});
}
}
});範本選項還有很多其他的選項，可參考我的其他博文，這裡主要關注的是設計模式。
更多程式相關知識，請造訪：程式設計入門！ ！
以上是淺談angular指令中的4種設計模式的詳細內容。更多資訊請關注PHP中文網其他相關文章！
