[自定义指令]将scope。$ watch放在链接与scope。$ watch放在控制器之间的区别

Question

抱歉，如果已经回答了这个问题，但是我找不到自己满意的文档。

在链接上使用scope。$ 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.
            });
        }
    };
});

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