angular指令中4种设计模式是什么

这篇文章给大家分享的是有关angular指令中4种设计模式是什么的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。

指令的功能集非常丰富，不过我们已经发现了指令的帕累托分布：使用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种设计模式是什么”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！