Question

我在我的范围内调用了一个方法，该方法对您传递的模型执行计算。

这导致无限循环，因为Angular正在修改原始对象，而不是方法中的本地副本。

HTML

<div ng-app="myApp">
    <ul ng-controller="TodoController">
        <li ng-repeat="todo in todos">{{ todo.name }} {{ doSomething(todo) }}</li>
    </ul>
</div>

JS

var app = angular.module('myApp', []);

app.controller('TodoController', ['$scope', function ($scope) {

    $scope.todos = [{
        name:      'Todo 1',
        someValue: 1
    }];

    $scope.doSomething = function (todo) {
        console.log(todo.someValue);
        todo.someValue += 1;
        return todo.someValue;
    };

}]);

在此处查看此操作https://jsfiddle.net/pvkpj169/ 如果在运行时打开控制台，您将看到它导致无限循环。

如何在此范围内阻止Angular修改原始模型？我希望这里所做的任何更改都是方法

的本地更改

Answer 1

你的doSomething（）通过添加待办事项的新副本使模型不稳定。

使用以下控制器代码：

var app = angular.module('myApp', []);

app.controller('TodoController', ['$scope', function($scope) {

  $scope.todos = [{
    name: 'Todo 1',
    someValue: 1
  }];

  $scope.doSomething = function(todo) {
    console.log(todo.someValue);
    var val = todo.someValue + 1;
    return val;
  };

}]);

Answer 2

如果是我，我会彻底摆脱这个功能并改变：

{{ doSomething(todo) }}

为：

{{ todo.someValue + 1 }}

Angular将在视图中为您评估此内容，并且摘要不会继续增加对象属性值

Angular正在修改方法中的范围

2 个答案: