angularjs - 观察 Controller Angularjs 中的对象

Question

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.form = {
        name: 'my name',
        age: '25'
    }

    $scope.$watch('form', function(newVal, oldVal){
        console.log(newVal);
    },true);
    
    $scope.foo= function(){
    $scope.form.name = 'abc';
    $scope.form.age = $scope.form.age++;
    }
    $scope.foo();
    
    $scope.bar= function(){
    $scope.form.name = 'xyz';
    $scope.form.age = $scope.form.age++;
    }
    $scope.bar();
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">{{form}}<br>
<label>Name:</label> <input type="text" ng-model="form.name"/><br>
        <label>Age:</label> <input type="text" ng-model="form.age"/>  </div>

在 Controller 中，我四次更改了 'form' 对象属性，但 $watch 没有触发。从 UI(input) 如果我改变它有效

Answer 1

您的情况是，我假设在您的所有快速更新期间， Angular 摘要循环没有时间通过​​。

以下是一些引用资料，以了解更多 Angular 1.X 的摘要周期:

https://www.thinkful.com/projects/understanding-the-digest-cycle-528/
https://www.ng-book.com/p/The-Digest-Loop-and-apply/

防止这种行为；您可以使用 $timeout(具有 $apply)依赖项强制通过摘要: https://docs.angularjs.org/api/ng/service/ $超时

例子:

$timeout(function(){
    $scope.form.name = name;
    $scope.form.age = $scope.form.age++;
})

我创建了一个 jsfiddle 来说明您的案例:

http://jsfiddle.net/IgorMinar/ADukg/