浅谈angular指令中的4种设计模式-木庄网络博客

本文摘自PHP中文网，作者青灯夜游，侵删。

本篇文章给大家介绍一下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();
        });
    }
});