javascript 角度 $watch | 从函数返回项目

Angular $watch | returning the item from function

提问by iConnor

I'm interested to find out why i always have to do this

我很想知道为什么我总是必须这样做

$scope.$watch( function() {
   return $scope.someData;
}, function( value ) {
   console.log( value );
});

for angular to actually watch the data, why do I have to do this, this is one of the things that really bug me because it looks pointless.

对于 angular 实际观看数据，为什么我必须这样做，这是真正让我烦恼的事情之一，因为它看起来毫无意义。

If I do something like this

如果我做这样的事情

$scope.$watch($scope.someData, function( value ) {
   console.log( value );
});

Which is nicer, it never works?

哪个更好，它永远不起作用？

I also use this a lot with factories

我也经常在工厂中使用它

say that $datais a factory I have to do

说那$data是我必须做的工厂

$scope.$watch( function() {
   return $data.someData;
}, function( value ) {
   console.log( value );
});

回答by Michael Benford

I guess it's worth mentioning that passing a function to $watchis useful when you want to monitor a condition:

我想值得一提的$watch是，当您想要监视条件时，将函数传递给很有用：

$scope.$watch(function() { 
    return $scope.data.length > 0; 
}, function() {
    // Do something every time $scope.data.length > 0 changes
});

or

或者

$scope.$watch(function() { 
    return $scope.prop1 && $scope.prop2;
}, function() {
    // Do something every time $scope.prop1 && $scope.prop2 changes
});

回答by AlwaysALearner

This works:

这有效：

$scope.$watch("someData", function( value ) {
   console.log( value );
});

回答by Mark Rajcok

With a factory, you need to watch a function because if you pass a string, Angular will evaluate it as an expression against the $scope. Since $data.someData is not defined on your $scope, it won't work.

对于工厂，您需要监视一个函数，因为如果您传递一个字符串，Angular 会将它作为针对 $scope 的表达式进行评估。由于 $data.someData 未在您的 $scope 上定义，因此它不起作用。

To elaborate on @Codezilla's comment, you could assign your factory data to some $scope property, and then watch that:

要详细说明@Codezilla 的评论，您可以将工厂数据分配给某个 $scope 属性，然后观察：

$scope.data = $data.someData;
$scope.$watch('data', function(newValue) { ... });

回答by Lokesh

Since the how-to-do answer is already given, I'll try to explain you what goes on actually and why it didn't work the way you tried at first time.

由于已经给出了如何做的答案，我将尝试向您解释实际发生的情况以及为什么它不像您第一次尝试的那样工作。

First of all this code sure works,

首先这段代码肯定有效，

$scope.$watch(function() {
   return $scope.someData;
}, function(value) {
   console.log(value);
});

But this is NOTthe perfect way. To be more precise $watchinjects the scopein the function, like this,

但这不是完美的方式。更准确地说$watch，scope在函数中注入了，像这样，

$scope.$watch(function(injectedScope) {
   return injectedScope.someData;
}, function(value) {
   console.log(value);
});

Previously it works because $scopeand injectScopeare one and the same thing.

以前它有效，因为$scope和injectScope是一回事。

Now as this articleexplains,

现在正如这篇文章所解释的那样，

Since $scopeis passed into the watch function, it means that we can watch any function that expects the scope as an argument and returns a value in response. A great example of this is $interpolatefunction.

由于$scope传递给 watch 函数，这意味着我们可以监视任何将范围作为参数并返回值作为响应的函数。一个很好的例子就是$interpolate函数。

So in your case, we can also make use of $interpolateas following:

因此，在您的情况下，我们还可以使用$interpolate以下方法：

$scope.$watch($interpolate("{{someData}}"), function(value) {
    ...
});

Now this is where we come to the short-hand method of using just a watch expression. $watchcan also accept an expression, which actually is interpolated.

现在这是我们使用仅使用 watch 表达式的简写方法的地方。 $watch也可以接受一个表达式，它实际上是插值的。

Thus by providing $scope.$watch("someData", ... ),

因此，通过提供$scope.$watch("someData", ... )，

someDatawill be:

someData将会：

1. interpolated as {{someData}}
2. using the scope injected by $watchfunction

1. 内插为 {{someData}}
2. 使用$watch函数注入的作用域

This is a nice, clean, readable, short-hand way of writing the expression instead of the actual function. But finally after all such compilations, it is ultimately the function which returns a value to watch.

这是编写表达式而不是实际函数的一种很好的、​​干净的、可读的、简写的方式。但最终在所有这些编译之后，最终是返回值来观察的函数。