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

发布时间：2020-12-17 10:24:27 所属栏目：安全来源：网络整理

导读：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.nam

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>

在控制器中我改变了’form’对象属性四次,但是$watch没有开火.从UI(输入),如果我改变它工作

你的情况是我认为角度摘要周期没有时间在你所有的快速更新过程中通过.

以下是一些参考资料,以了解更多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

例：

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

我创建了一个jsfiddle来说明你的情况：

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!