Angular的watch在使用controllerAs语法时无法工作。

15 浏览
0 Comments

Angular的watch在使用controllerAs语法时无法工作。

出现了观察响应的问题。\n我有一个名为SettingsCtrl的控制器，并且这是我的视图：\n

\n这是我的控制器：\n

app.controller('SettingsCtrl', function ($scope, settingsFactory, Test) {
  var vm = this;
  settingsFactory.test().then(function(response){
     vm.test = response;
  })
  /////  或者
  vm.test = Test; // 这是来自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);
    });
  });

\n我一直在搜索并找到了不同的解决方案，但没有一个有效。\n**** 只有在控制器加载时，它才会触发一次观察并显示我的控制台日志，但是当我尝试进行更改时，观察者不起作用。\n我做错了什么？

0

3 答案

0 Comments

Angular的watch方法在使用controllerAs语法时无法正常工作的原因是因为无法直接访问控制器的属性。解决方法是使用$scope.$watch来监视控制器的属性，并在回调函数中进行相应的操作。以下是一个例子：

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

通过以上代码，可以在控制器的test属性发生变化时执行回调函数，并打印出新旧值。

如果需要深度监视对象的属性变化，可以使用第三个参数设置为true。这样可以深度遍历对象的所有属性，并在任何属性发生变化时执行回调函数。

参考链接：[watch an object](https://stackoverflow.com/questions/19455501)

希望以上解决方法对您有帮助。

0
0 Comments

AngularJS中的controllerAs语法与Angular的watch功能不兼容，导致无法正常工作。为了解决这个问题，可以通过将$scope.$watch方法替换为$scope.$watchCollection来实现监视。下面是解决方法的代码示例：

angular
  .module('app', [])
  .controller('SettingsCtrl', function() {
    var vm = this;
    vm.test = '';
    $scope.$watchCollection(function() {
      return vm.test;
    }, function(newV, oldV) {
      if (newV && newV.name && newV.name !== oldV.name) {
        vm.test.watchedName = newV.name.toUpperCase();
      }
    });
  });

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

0
0 Comments

Angular的watch函数在使用controllerAs语法时无法正常工作的原因是，watch函数默认只监视引用的变化，如果只是改变了所监视对象的属性，watch函数是不会被触发的。解决这个问题的方法是在watch函数的最后加上true参数，这样就可以进行深度监视，每当所监视对象的属性发生变化时，watch函数都会被触发。通过添加true参数，可以解决这个问题。

具体的解决方法如下：

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

在这个例子中，vm是要监视的对象，newVal和oldVal分别表示新旧的值。通过在watch函数的第三个参数位置添加true参数，实现了对vm对象属性的深度监视。

非常感谢！我忘记了深度监视，这个方法帮了我大忙。

0