Question

作为一个新的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（ '工具提示'）。但是，在这种特殊情况下，该属性包含一个需要解析的表达式，这就是我正在查看上述两个选项的原因。

Answer 1

在制作需要将数据绑定到其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/

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

1 个答案:

HTML

JS