Javascript 查看多个$scope属性

有没有办法使用

$watch

例如

---

$watch

第一个参数也可以是函数

$scope.$watch(function watchBothItems() {
  return itemsCombinedValue();
}, function whenItemsChange() {
  //stuff
});

如果两个组合值很简单，那么第一个参数通常只是一个角度表达式。例如，firstName和lastName：

$scope.$watch('firstName + lastName', function() {
  //stuff
});

---

$watch第一个参数可以是或函数。请参阅有关的文档。它包含许多关于$watch方法如何工作的有用信息：调用watchExpression时，角度如何比较结果等。

组合值的更安全解决方案可能是将以下函数用作您的

$watch

函数：

function() { return angular.toJson([item1, item2]) }

或

那么：

scope.$watch(function() { 
   return { 
      a: thing-one, 
      b: thing-two, 
      c: red-fish, 
      d: blue-fish 
   }; 
}, listener...);

---

下面是一个与您的原始伪代码非常相似的解决方案，它实际上可以工作：

$scope.$watch('[item1, item2] | json', function () { });

编辑：好吧，我觉得这样更好：

$scope.$watch('[item1, item2]', function () { }, true);

---

基本上，我们跳过了json步骤，这一步一开始似乎很愚蠢，但没有它就无法工作。它们的关键点是经常被忽略的第三个参数，它打开对象相等而不是引用相等。那么，我们创建的数组对象之间的比较实际上是正确的。

为什么不简单地将其包装在一个

forEach

中呢

angular.forEach(['a', 'b', 'c'], function (key) {
  scope.$watch(key, function (v) {
    changed();
  });
});

---

这与为组合值提供函数的开销大致相同，实际上不必担心值的组成

从AngularJS 1.1.4开始，您可以使用

$watchCollection

：

$scope.$watchCollection('[item1, item2]', function(newValues, oldValues){
    // do stuff here
    // newValues and oldValues contain the new and respectively old value
    // of the observed collection array
});

普朗克例子

---

文档

从AngularJS 1.3开始，有一种新方法用于观察一组表达式

$scope.foo = 'foo';
$scope.bar = 'bar';

$scope.$watchGroup(['foo', 'bar'], function(newValues, oldValues, scope) {
  // newValues array contains the current values of the watch expressions
  // with the indexes matching those of the watchExpression array
  // i.e.
  // newValues[0] -> $scope.foo 
  // and 
  // newValues[1] -> $scope.bar 
});

---

当年龄和名称值都发生更改时，将调用此函数。

您可以使用$watchGroup中的函数来选择范围中对象的字段

        $scope.$watchGroup(
        [function () { return _this.$scope.ViewModel.Monitor1Scale; },   
         function () { return _this.$scope.ViewModel.Monitor2Scale; }],  
         function (newVal, oldVal, scope) 
         {
             if (newVal != oldVal) {
                 _this.updateMonitorScales();
             }
         });

---

在1.3版中引入了

$watchGroup

，使用它我们可以通过单个

$watchGroup

块查看多个变量

$watchGroup

将数组作为第一个参数，我们可以在其中包含所有要监视的变量

$scope.$watchGroup(['var1','var2'],function(newVals,oldVals){
   console.log("new value of var1 = " newVals[0]);
   console.log("new value of var2 = " newVals[1]);
   console.log("old value of var1 = " oldVals[0]);
   console.log("old value of var2 = " oldVals[1]);
});

---

---

这似乎是一个需要默认包含在框架中的用例。即使像

fullName=firstName+“”+lastName

这样简单的计算属性也需要传递函数作为第一个参数（而不是像

'firstName，lastName'

这样的简单表达式）。Angular功能非常强大，但在某些领域，它可以以不（似乎）影响性能或设计原则的方式对开发人员更加友好。好吧，$watch只接受一个角度表达式，它在调用的范围内进行评估。所以您可以执行

$scope.$watch（'firstName+lastName'，function（）{…}）

。您也可以只进行两次监视：

functionnamechanged（）{}$范围：$watch（'firstName'，名称更改）$范围：$watch（'lastName'，名称已更改）。我在答案中添加了简单的大小写。“firstName+lastName”中的加号是字符串连接。因此，angular现在只检查连接的结果是否不同。字符串连接需要一点注意-如果将“超自然”更改为“para norman”，则不会触发响应；最好在第一个和第二个术语之间加上“\t | \t”这样的分隔符，或者只使用JSON，虽然amberjs很差劲，但它内置了这个功能！听到了吗，伙计们。我想对手表进行操作是最合理的可行方式。在这种情况下，log（）将执行多次，对吗？我认为在嵌套$watch函数的情况下，它不会。在解决方案中，它不应该同时监视多个属性。不，每个监视的属性每次更改只执行一次日志。为什么它会被多次调用？对，我的意思是，如果我们想同时观看所有的视频，那就不好用了。当然为什么不呢？我在我的一个项目中就是这样做的<代码>已更改（）。这与为组合值提供函数时的行为完全相同。稍有不同的是，如果数组中的多个项同时更改，$watch将只触发处理程序一次，而不是每个项更改一次。我有一个类似的问题。这对我来说是正确的答案。如果数组表达式中的项不是简单类型，则两者都会有轻微的性能开销。确实如此。。它正在对组件对象进行全深度比较。这可能不是你想要的。请参阅当前批准的答案，该版本使用的是modern angular，没有进行完全深度比较。出于某种原因，当我尝试在数组上使用$watchCollection时，我遇到了以下错误
TypeError:Object#没有方法“$watchCollection”
，但此解决方案帮助我解决了问题！很酷，您甚至可以查看对象中的值：
$scope.$watch（“[chaptercontent.Id，anchorid]”，function（newValues，oldValues）{…}，true）请注意，第一个参数不是数组。这是一个看起来像数组的字符串。谢谢。如果它对我有效，我会给你一千枚金币——当然是虚拟的：）说得清楚（我花了几分钟才意识到）
$watchCollection
是用来给一个对象，并提供一个手表，用于对该对象的任何属性进行更改，然而，
$watchGroup
是一个单独属性的数组，用于监视更改。略有不同，以解决相似但不同的问题。呸！不知何故，当你使用这个方法时，newValues和oldValues总是相等的：谢谢。它解决了我的问题。使用$watch是否存在性能问题？如果没有
作用域的第三个
true
参数，$watch
（如您的示例所示），
listener（）
每次都会触发，因为匿名哈希每次都有不同的引用。我发现这个解决方案适合我的情况。对我来说，它更像是：
返回{a:function（），b:functionB（），…}
。然后我检查
$scope.$watch('age + name', function () {
  //called when name or age changed
});

        $scope.$watchGroup(
        [function () { return _this.$scope.ViewModel.Monitor1Scale; },   
         function () { return _this.$scope.ViewModel.Monitor2Scale; }],  
         function (newVal, oldVal, scope) 
         {
             if (newVal != oldVal) {
                 _this.updateMonitorScales();
             }
         });

$scope.$watchGroup(['var1','var2'],function(newVals,oldVals){
   console.log("new value of var1 = " newVals[0]);
   console.log("new value of var2 = " newVals[1]);
   console.log("old value of var1 = " oldVals[0]);
   console.log("old value of var2 = " oldVals[1]);
});