在angularjs中应用$ watch的两种方法之间的区别

Question

我正在使用服务在控制器之间进行通信，而在我的控制器中使用$ watch，我能够以两种方式使用它

service.coffee

myContent = null

getContent = ->
  return myContent

setContent = (data) ->
  myContent = data
  return myContent

我的控制员：

$scope.test = myService

$scope.$watch "test.getContent()", ->
    if $scope.test.getContent() is 'data'
      console.log 'yes'

此外，

$scope.$watch (->
   test.getContent()
  ), (value) ->
    if value is 'data'
      console.log 'yes'

两者都给出了预期的结果，但我想知道两种方法之间的差异以及我们应该使用相同的场景

Answer 1

请咨询Angular Documentation on $rootScope以获得更深入的答案。

$scope.$watch()有三个参数，其中watchExpression是第一个。 watchExpression可以是字符串或函数。如果是字符串，则会在相关的$scope中对其进行评估。

这使我们可以轻松收听范围内的值：

$scope.someValue = 2;
$scope.$watch('someValue', function(someValue) {
    // some function
});

在您的情况下，您可以简单地将其传递给函数：

$scope.$watch($scope.test.getContent, ...);

总而言之，当一个函数的结果是你想要观察的时候传递一个函数，或者传递一个表达式，如果它更有意义（在大多数情况下，它可能会）。将字符串表达式求值传递给已经可用的某个函数的结果是没有意义的，特别是考虑到必须解析表达式，从而导致额外的开销。

Answer 2

实际上没有区别。 $watch函数的第一个参数是String或函数。如果传递一个字符串作为$watch的第一个参数，Angular会自动将字符串解析为一个以$scope作为函数上下文的函数。

所以你可以采取以下代码

$scope.$watch("book", function(){...});

作为

$scope.$watch(function(){return $scope.book;}, function(){...});

它们是内部等价物。