javascript - AngularJS 1.4.8 - 选择中的 ngOptions - 当我在 ngOptions 中的选项之前以编程方式设置模型时无限 $digest() 循环

Question

我在从 1.2.14 迁移到 1.4.8 时遇到了这个问题。这在 1.2.14 中工作正常，但我在 1.4.8 中得到无限的 $digest() 循环。这是一个Fiddle证明问题。 Fiddle 比这篇文章更容易看，但它让我包含代码

我有一个 select看起来像这样的元素:

<select ng-model="selectedId" ng-options="opt.id as opt.label for opt in getOptions()">

我的选项是对象，像这样:

$scope.options = [ { id: 1, label: 'one' }, { id: 2, label: 'two' } ];

我想为 ngOptions 指令提供的选项数组取决于条件；有时我只想给它$scope.options ，但有时我想包括另一个选项。

$scope.getOptions = function() {
    if ($scope.showThirdOption)
        return [{ id: 3, label: 'three' }].concat($scope.options);
    else
        return $scope.options;
};

现在，如果我以编程方式将我的模型设置为 3:

...
$scope.selectedId = 3;
...

...即使该选项不存在，Angular 也不会感到不安。它只是添加了一个 <option>节点到 <select>元素:<option value="?" selected="selected"></option>并且下拉列表中的所选值显示为空白。

但是如果我然后设置我的状态 s.t.我的 getOptions() 返回附加选项:

...
$scope.selectedId = 3;
$scope.showThirdOption = true;
...

...我得到一个无限的$digest() 循环。

是否有避免此类问题的好方法？您认为这是 Angular 中的错误(从技术上讲是回归)，还是这只是……我不应该使用 ngOptions 的方式？

~~~ Again, I have a nice Fiddle for you to play around with!! ~~~

Answer 1

错误发生是因为你在ng-options中调用了函数getOptions()。创建新变量并分配此函数返回的值，然后在 ng-options 中使用它:

$scope.newOptions = $scope.getOptions();

ng-options="opt.id as opt.label for opt in newOptions"

也不要忘记在单击按钮时更新新选项。

那么你将没有无限的摘要。查看更新的 fiddle :http://jsfiddle.net/bbcjeuhb/