指令隔离范围与attrs。$观察

时间:2014-01-06 19:23:20

标签: angularjs angularjs-directive

作为一个新的Angular用户,我遇到了一个问题,我不能在一个元素上有多个带有隔离范围的指令。

我已经意识到,我可以使用attrs。$ observe指令的链接方法,而不是孤立的范围,以保持属性值的最新状态。我想确保我正在以正确的方式做事。

我应该何时使用隔离范围,何时应使用attrs。$ observe?例如......

隔离范围

App.directive('tooltip', function() {
    return {
        scope: {
            tooltip: '@'
        },
        link: function(scope, element) {
                element.enableSomeTooltip({
                    content: function() {
                        return scope.tooltip;
                    }
                });
        }
    }
});

ATTRS。$观察()

App.directive('tooltip', function() {
    return {
        link: function(scope, element, attrs) {
            var tooltip;
            attrs.$observe('tooltip', function(newTooltip) {
                tooltip = newTooltip;
            });
            element.enableSomeTooltip({
                content: function() {
                    return tooltip;
                }
            });
        }
    }
});

以上两者都有相同的最终结果,对吧?那么“正确”或“角度”的做事方式。如果他们没有相同的最终结果,请解释,以便我能更好地理解。谢谢!

编辑:我想我也可以通过其他方式访问该属性,例如通过元素。例如。 element.attr( '工具提示')。但是,在这种特殊情况下,该属性包含一个需要解析的表达式,这就是我正在查看上述两个选项的原因。

1 个答案:

答案 0 :(得分:0)

在制作需要将数据绑定到其html模板的可重用组件时,我倾向于使用隔离范围。

例如,如果一个指令只调用一些非角度插件(如Bootstrap或JQueryUI)并且从不创建一个html模板,那么创建一个隔离范围可能没什么价值,因为attrs。$ observe可以抓取属性的值已更改,并将值保存到指令的链接闭包中,而无需触及$ scope。

HTML

 <div ng-controller="MyController as vm">
    <isolate-scope-directive message="vm.message"></isolate-scope-directive>
    <non-isolate-scope-directive message="{{vm.message}}"></non-isolate-scope-directive>
</div>

JS

angular.module('app').controller('MyController', function ($scope) {
    var vm = this;
    vm.message = 'Hello world';
    var i = 0;
    setInterval(function () {
        $scope.$apply(function () {
            vm.message = 'Hello world ' + i++;
        });
    }, 500);
});

angular.module('app').directive('isolateScopeDirective', function () {
    return {
        scope: {
            message: '='
        },
        link: function ($scope, element, attributes, controller) {},
        template: '<div>{{message}}</div>'
    };
});

angular.module('app').directive('nonIsolateScopeDirective', function () {
    return {
        link: function ($scope, element, attributes, controller) {
            attributes.$observe('message', function(newMessage){
                element.html(newMessage);
            });
        },
        template: '<div></div>'
    };
});

这是一个显示实际效果的jsfiddle:http://jsfiddle.net/ow02cv5w/2/