本篇文章给大家介绍一下angular指令中的4种设计模式。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。
【相关推荐：《angular教程》】
指令的功能集非常丰富，不过我们已经发现了指令的帕累托分布：使用angular编写的大量指令只会用到可用性和设计模式中很小的比例，这些指令大概可以分为4类：
只渲染指令——这些指令将渲染作用域中的数据，但不会修改数据。事件处理封装器——这些指令将封装事件处理程序，从而与数据绑定进行交互，例如ngclick，这些指令不渲染数据。双向指令——这些指令既渲染数据也修改数据。集合了以上3种功能的模板指令。只渲染指令这些指令遵守一个简单的设计模式：它们将监视变量并更新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种设计模式的详细内容。