[自定义指令]区分放置范围$ watch在链接vs范围$ watch在控制器上

对不起，如果这已被回答，但我找不到满足自己的文档。

使用范围有什么区别$ watch在链接上vs自定义指令中的控制器函数？

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

我的应用程序在两个地方的表现逻辑完全相同。任何想法？

来源

2014-11-22 ove

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

来源

2014-11-22 03:37:26 pixelbits

我认为可能有一些与$ scope有关的东西。$ digest或$ scope。$ apply – ove 2014-11-22 03:42:47

不，与这无关。 – pixelbits 2014-11-22 03:45:09

在功能上，两者之间没有区别 - 无论您将观察者添加到范围（如果它的行为不同，那么都会有问题！）。

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

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

下面是使用分离物范围的例子：

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

在两个例子中它是控制属性如何外部映射到内部范围属性，然后该控制器能够与这些内部属性的作用视需要的指令。

来源

2014-11-22 03:45:58

[自定义指令]区分放置范围$ watch在链接vs范围$ watch在控制器上

回答

相关问题