Question

很抱歉，如果这已经得到解答，但我找不到满足自己的文档。

使用范围。在链接上的$ watch与自定义指令中的控制器功能有什么区别？

var linker = function (scope, element) {

    // same watch block
    scope.$watch('propertyToWatch', function (value) {

    });

    element.html(template).show();
    $compile(element.contents())(scope);
};

return {
    require: '^directiveName',
    scope: {

    },
    link: linker,
    controller: ['$scope', function ($scope) {

        // same watch block
        scope.$watch('propertyToWatch', function (value) {
        });
    }

我的应用程序在两个地方都表现出完全相同的推杆逻辑。有什么想法吗？

Answer 1

除了在不同的地方之外，没有区别。

Answer 2

从功能上来说，两者之间没有区别 - 无论你是否将观察者添加到范围内（如果它采取不同的行动，那么就会出现问题！）。

我倾向于在指令中添加观察者来控制外部属性如何映射到内部范围变量（类似于指令隔离范围）。即控制器并不关心值的来源，只要它们在范围内。

然后我在控制器中使用观察者来观察这些内部属性的值 - 知道子属性何时发生了变化并响应控制器内部的属性。即指令并不关心如何使用属性，只需要将它们放在控制器的范围内。

以下是使用隔离范围的示例：

angular.module('MyModule').directive('myDirective', function(){
    return {
        scope: {
            // The isolate scope sets up a watcher on the external
            // property and makes it available on the scope
            // as `scope.internalProp`
            'internalProp': '=externalProp'
        },
        controller: function($scope){
            // Work with `internalProp` - the directive
            // manages putting it on the scope.
            $scope.internalProp //...

            $scope.$watch('internalProp.myProp', function(value){
                // Do something when `myProp` changes.
            });
        }
    };
});

以下是使用子范围但将相同外部值映射到scope.internalProp的示例。这不会创建隔离范围，因此您仍然可以获得范围继承（有时可能很有用）。

angular.module('MyModule').directive('myDirective', function($parse){
    return {
        scope: true,
        link: function(scope, element, attr){
            // Example of manually watching an attribute value
            // in a directive.

            var propGetter = $parse(attr['externalProp']);
            scope.$parent.$watch(propGetter, function(value){
                scope.internalProp = value;
            });
        },
        controller: function($scope){
            // Work with `internalProp` - the directive
            // manages putting it on the scope.
            $scope.internalProp //...

            $scope.$watch('internalProp.myProp', function(value){
                // Do something when `myProp` changes.
            });
        }
    };
});

在这两个示例中，它指示外部属性如何映射到内部作用域属性，然后控制器可以根据需要使用这些内部属性。

[自定义指令]放置范围之间的区别。$ watch on link vs scope。$ watch on controller

2 个答案: