Question

问题

我发现ng-repeat指令无法跟踪新数组的添加。
在我的例子中，新数组是＆＃39;选项＆＃39;。
该指令是使用ng-dialog（第三方库）显示的模板的一部分如果我关闭对话框并再次打开它，则ng-repeat将在关闭之前获取我所做的更改。

我已尝试过$ scope。$ apply（）;但我得到一个警告，它已经在运行。

更新++

我最终使用的解决方案是在ng-init上添加一个函数来检查该数组是否存在，如果它不存在则创建它然后将其分配给新变量。

这是一个更深入的例子，
写这个jsFiddle已经指出问题在ng-include / ng-repeat中 - 没有它就没问题。 <击> http://jsfiddle.net/20mobk2h/56/
http://jsfiddle.net/20mobk2h/61/

数组上的ng-repeat循环称为可能存在或不存在的选项。

<div ng-init="options = element.options">
    <div ng-repeat="option in options" ng-include="'optionsTree'"></div>
</div>

我通过以下方式添加新选项：

$scope.addItem = function(item) {

    if(!item.options){
        item.options = [];
    }

    var obj = {
        val: 'blah'
    };

    item.options.push(obj);
}

Answer 1

$scope.$apply()应该是您问题的解决方案。

尝试将此包装用于$scope.$apply()

$scope.safeApply = function(fn) {
  var phase = this.$root.$$phase;
  if(phase == '$apply' || phase == '$digest') {
    if(fn && (typeof(fn) === 'function')) {
      fn();
    }
  } else {
    this.$apply(fn);
  }
};

然后在任何需要的地方使用safeApply替换$ apply

$scope.safeApply(function() {
  alert('Now I'm wrapped for protection!');
});

可能会传递你需要运行的功能。使用此功能，您应该能够尊重apply - digest循环并仅在允许的情况下运行apply。

取自here

Answer 2

更改此代码：

<div ng-init="options = item.options">
    <div ng-repeat="option in options" ng-include="'nest_options'"></div>
</div>

到此：

<div>
    <div ng-repeat="option in item.options" ng-include="'nest_options'"></div>
</div>

此处的问题是，当您将item.options分配给新变量options时，您会中断对item个对象的引用，因为这是第一次（item.options为{{ 1}}）options是undefined，原始值在Javascript中按值传递。因此，稍后当您更改undefined属性（通过添加新数组元素）时，此更改不会反映在options变量中。

但是，当您第二次打开弹出窗口时，options不再是item.options，它已经是一个对象（数组），因此赋值undefined会导致正常对象引用以及对options = item.options的更改都会在item.options中进行镜像。

演示：http://jsfiddle.net/20mobk2h/57/

Answer 3

你能编写控制器和页面的完整代码吗？你有没有在yr页面和routeProvider中指定ng-controller？如果在routeProvider中指定了ng-controller，则从页面中删除它。

AngularJS ng-repeat未使用ng-include检测到动态生成的数组

问题

更新++

3 个答案:

演示：http://jsfiddle.net/20mobk2h/57/