Question

我是angularJS的新手，我不知道如何将$watch添加到特定模型中。在浏览angularjs教程时，我遇到了一些问题。我在评论部分提到了我的疑问。请仔细阅读。

(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 code ..

<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>

在这里查看我的file_get_contents()

Answer 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

Answer 2

除非您的代码中没有其他功能，否则您不需要$ watch（）。

$ watch（）是angularJS最受滥用的功能之一。很多AngularJS新手都会添加不必要的$ watch（）表达式来复杂代码。

使用$ watch（）的控制器通常是一个糟糕的代码味道。肯定有些地方你应该使用$ watch - 但从你的例子来看，这不是其中之一。

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

＆＃13;

(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);

＆＃13;

<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>

＆＃13;

AngularJS。将$ watch添加到特定模型

2 个答案: