1

观看响应有问题。

我有一个 SettingsCtrl 作为设置，这是我的观点：

<input  type="text" class="form-control" ng-model="settings.test.one"  />
<input  type="text" class="form-control" ng-model="settings.test.second"  />

这是我的控制器：

app.controller('SettingsCtrl', function ($scope, settingsFactory, Test) {
  
  var vm = this;
  
  
  settingsFactory.test().then(function(response){
  
     vm.test = response;
  })
  
  /////  OR
  
  vm.test = Test; // this is from ui-router resolve
  
  
    $scope.$watch(angular.bind('vm', function () {
    return vm.test;
    }), function (newV, oldV) {
    console.log(newV, oldV); 
    });
  
    $scope.$watch(function watch(scope){
     return vm.test;
    }), function handle(newV, oldV) {
    console.log(newV, oldV);
    });
  
    $scope.$watch('vm', function (newVal, oldVal) {
        console.log('newVal, oldVal', newVal, oldVal);
    });
  
  });

我一直在寻找并找到了不同的解决方案，但它们都不起作用。

**** 它只是第一次观看，当控制器加载并且我看到我的控制台日志时，但是当我尝试进行更改时，观察者什么也不做。

我做错了什么？

4

5 回答 5

8

如果我没记错的话，你的 $watch 会在第一次加载控制器时被击中，但不会在你更改对象中的某些内容时被击中。如果这是真的，那么试试这个：

$scope.$watch('vm', function (newVal, oldVal) {
    console.log('newVal, oldVal', newVal, oldVal);
}, true);

默认情况下，$watch 函数会监视引用，因此如果您只更改被监视对象的属性，它将不会被触发。通过true在末尾添加，您开始深入观察，每次更改对象的属性时都会获得成功。

于 2016-06-15T09:24:11.393 回答
2

AngularJS 仍然按预期工作：

angular
  .module('app', [])
  .controller('SettingsCtrl', function($scope) {

    var vm = this

    vm.test = ''


    $scope.$watch(function watch(scope) {
        return vm.test;
      },
      function handle(newV, oldV) {
        if (newV && newV.name && newV.name !== oldV.name) {
          vm.test.watchedName = newV.name.toUpperCase()
        }
      }, true);
  });
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app='app'>
  <div ng-controller='SettingsCtrl as settings'>
    <input type='text' ng-model='settings.test.name' />
    <pre><code>
 {{ settings.test.watchedName }}
 </code></pre>
  </div>
</div>

于 2016-06-15T09:42:28.040 回答
1

尝试以下代码进行观看。

 $scope.$watch(function(){
    return ctrl.test;
},function(newVal,oldVal){
    console.log(newVal,oldVal);
},true)

这是工作小提琴

您将需要对对象进行深入观察。

此链接$watch an object将帮助您理解这一点。

于 2016-06-15T09:20:47.160 回答
0

请尝试在观察器中将 vm 变量称为 controller.vmVariable。Controller 是您的控制器名称，然后是您在 vm 中分配的变量。

$scope.$watch('controller.vmVariable', function (newVal, oldVal) {
    console.log('newVal, oldVal', newVal, oldVal);
});
于 2016-06-15T09:08:57.053 回答
0

参考 github 帖子 ( https://github.com/johnpapa/angular-styleguide/issues/428 ) 和 ( http://jsbin.com/levewagufo/edit?html,js,console,output ) 后，什么对我有用) 是在编写控制器的开头将控制器从 vm = this 重命名为（在你的情况下） settings = this 。这确保引用与视图中的“控制器为”声明相匹配。希望这可以帮助

在视图中：

ng-controller="AddDetailController as addDetailsCtrl"

在控制器 Js 文件中：

 $scope.$watch('addDetailsCtrl.currentPage', function (current, original) {
        console.log(current + ":" + original);    });
于 2017-07-04T14:53:28.383 回答