Javascript Angular.js将一个属性绑定到另一个属性

作为一个人为的例子，假设我有一个角度控制器，看起来像这样：

function OverflowController($scope) {

  // initialize the count variable
  $scope.count = 0;

  // pretend the overflow logic is complex and doesn't belong in a filter or view
  var count = parseInt($scope.count);

  if (count < 100) {
    $scope.overflow = "normal";
  }
  else if (count < 200) {
    $scope.overflow = "warning";
  }
  else {
    $scope.overflow = "error";
  }

};

<input ng-model="count">
<p>Count: {{count}}</p>
<p>Overflow? {{overflow}}</p>

函数溢出控制器（$scope）{
//初始化count变量
$scope.count=0；
//假设溢出逻辑很复杂，不属于过滤器或视图
var count=parseInt（$scope.count）；
如果（计数<100）{
$scope.overflow=“正常”；
}
否则，如果（计数<200）{
$scope.overflow=“警告”；
}
否则{
$scope.overflow=“error”；
}
};

我的观点是这样的：

function OverflowController($scope) {

  // initialize the count variable
  $scope.count = 0;

  // pretend the overflow logic is complex and doesn't belong in a filter or view
  var count = parseInt($scope.count);

  if (count < 100) {
    $scope.overflow = "normal";
  }
  else if (count < 200) {
    $scope.overflow = "warning";
  }
  else {
    $scope.overflow = "error";
  }

};

<input ng-model="count">
<p>Count: {{count}}</p>
<p>Overflow? {{overflow}}</p>

计数：{{Count}

溢出？{{溢出}}

如何将作用域的溢出属性绑定到count属性，以便在更新计数时溢出也会自动更新？

使用$watch:（）

函数溢出控制器（$scope）{
//初始化count变量
$scope.count=0；
$scope.$watch（'count'，函数（count）{
//假设溢出逻辑很复杂，不属于过滤器或视图
如果（计数<100）{
$scope.overflow=“正常”；
}
否则，如果（计数<200）{
$scope.overflow=“警告”；
}
否则{
$scope.overflow=“error”；
}
});
};

一个简单的方法是观察它的变化：

  $scope.$watch('count', function(newVal, oldVal) {
    if (!angular.equals(newVal, oldVal)) {
       updateCount();
    }
  });

  function updateCount() {
    var count = parseInt($scope.count);

    if (count < 100) {
      $scope.overflow = "normal";
    }
    else if (count < 200) {
      $scope.overflow = "warning";
    }
    else {
      $scope.overflow = "error";
    }
  }

$scope.$watch（'count'，函数（newVal，oldVal）{
如果（！angular.equals（newVal，oldVal））{
updateCount（）；
}
});
函数updateCount（）{
var count=parseInt（$scope.count）；
如果（计数<100）{
$scope.overflow=“正常”；
}
否则，如果（计数<200）{
$scope.overflow=“警告”；
}
否则{
$scope.overflow=“error”；
}
}

只需将getOverflow用作$scope函数：

<div ng-controller="OverflowController">
<input ng-model="count" />
<p>Count: {{count}}</p>
<p>Overflow? {{getOverflow()}}</p>

计数：{{Count}

溢出？{{getOverflow（）}}

angular.module（'myApp'，[]）
.controller（“OverflowController”，函数（$scope）{
//初始化count变量
$scope.count=0；
$scope.getOverflow=函数（）{
var count=parseInt（$scope.count）；
var overflow=“error”；
如果（计数<100）{
溢出=“正常”；
}否则，如果（计数<200）{
溢出=“警告”；
}
回流溢流；
}
});

---

jsIDLE:

视图是否自动更新？Angular如何知道传递给

$watch

的函数已更新

溢出

属性？视图将自动更新。在watch函数运行之后，angular会执行一个摘要，检查所有模板值是否有更改。这样做的唯一问题是，每次angular执行摘要时都会运行getOverflow函数，这通常是错误的。使用$watch意味着它将仅在计数更改时运行。yub，但如果必须考虑其他属性来计算溢出，则不必添加第二个watch。您只需将该属性添加到同一个watch即可。看看我对这个问题的回答：