在控制器Angularjs中观察一个对象

时间:2017-06-13 12:14:56

标签: angularjs



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>
&#13;
&#13;
&#13;

在控制器中,我改变了形式&#39;对象属性四次,但是$ watch没有开火。从UI(输入),如果我改变它的工作

2 个答案:

答案 0 :(得分:2)

您的情况是我认为角度摘要周期在您的所有快速更新期间没有时间通过​​。

以下是一些参考资料,可以更多地了解Angular 1.X的摘要周期:

防止那种行为;你可以使用$ timeout(具有$ apply)依赖强制传递摘要:https://docs.angularjs.org/api/ng/service/ $ timeout

示例:

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

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

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

答案 1 :(得分:1)

我们可以使用watchgroup

$scope.$watchGroup(['form.name', 'form.age'], function(newValues, oldValues, scope) {
//...
});