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

当前第2页返回上一页

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;
            });
        }
    }
});