角JS。将 $watch 添加到特定模型答案

【问题标题】：AngularJS. Adding $watch to the particular model角JS。将 $watch 添加到特定模型
【发布时间】：2016-11-08 08:43:49
【问题描述】：

我是 angularJS 的新手，我不知道如何将 $watch 添加到特定模型。在阅读 angularjs 教程时，我遇到了一些问题。我在 cmets 部分提到了我的疑问。请通过这个。

(function(angular) {
angular.module('controllerAsExample', [])
  .controller('SettingsController1', SettingsController1);

function SettingsController1() {
  this.name = "John Smith";
  this.contacts = [
    {type: 'phone', value: '408 555 1212'},
    {type: 'email', value: 'john.smith@example.org'} ];
}
//how to add $watch to ng-model 'settings.name' 
/*$scope.$watch("settings.name", function(oldval, newval){
  console.log(oldval + "  + " + newval);
});*/

SettingsController1.prototype.greet = function() {
  console.log(this.name);
};


})(window.angular);

HTML 代码..

<body ng-app="controllerAsExample">
  <div id="ctrl-as-exmpl" ng-controller="SettingsController1 as settings">
    <label>Name: <input type="text" ng-model="settings.name"/></label>
    <button ng-click="settings.greet()">greet</button><br/>
  </div>
</body>

在这里查看我的link

【问题讨论】：

为什么要添加 $watch？

标签： javascript angularjs

【解决方案1】：

基本上，您需要注入$scope 上下文。如本 SO answer 所述。

function SettingsController1($scope) {
  this.name = "John Smith";
  this.contacts = [
    {type: 'phone', value: '408 555 1212'},
    {type: 'email', value: 'john.smith@example.org'} ];

  $scope.$watch(angular.bind(this, function () {
    return this.name;
  }), function (newVal, oldVal) {
    console.log('Name changed to ' + newVal + ', old value = ' + oldVal);
  });
}

注意$scope 被传递给函数控制器，然后angular.bind(this 告诉观察者正确的上下文。

工作示例： http://plnkr.co/edit/HR0DTphdBsF2xXUfmwfT?p=preview

【讨论】：

【解决方案2】：

除非您的代码中没有演示其他功能，否则您不需要 $watch()。

$watch() 是 angularJS 中被滥用最多的函数之一。许多 AngularJS 新手会添加不必要的 $watch() 表达式，这会使代码复杂化。

带有 $watch() 的控制器通常是一种不好的代码气味。肯定有你应该使用 $watch 的地方——但从你的例子来看，这不是其中之一。

相反，您可以执行以下操作。

(function(angular) {
angular.module('controllerAsExample', [])
  .controller('SettingsController1', SettingsController1);

function SettingsController1() {
  this.name = "John Smith";
  this.contacts = [
    {type: 'phone', value: '408 555 1212'},
    {type: 'email', value: 'john.smith@example.org'} ];
}

SettingsController1.prototype.greet = function() {
  console.log(this.name);
};

})(window.angular);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="controllerAsExample">
  <div id="ctrl-as-exmpl" ng-controller="SettingsController1 as settings">
    <label>Name: <input type="text" ng-model="settings.name"/></label>
    <button ng-click="settings.greet()">greet</button><br/>
  </div>
</div>

【讨论】：

我想要 $watch 作为输入字段。出于某种目的需要它。
您能否更新您的原始问题并说明您为什么要使用 $watch。请解释您正在尝试执行的what 和why。这将有助于获得高质量的答案。