使用concat时出错

时间:2014-11-06 13:07:44

标签: javascript angularjs

我使用像这样的concat函数

我的HTML:

...
<list-of-items items="platforms.concat(platformsCible)"
                           label="$item"
                           selected-item="platform"
                           createfunction="add_platform($name)"
                           selectable="true"
                           editable="false"
                           size="small">
            </list-of-items>
...

我的JS:

...
    /* Find all the platforms */
    PlatformService.get($routeParams.application, $routeParams.version).then(function (platforms) {
        $scope.platforms = platforms;
    }).then(function () {
        /* If platform was mentionned in the route, try to find it or add it */
        if ($scope.platform) $scope.add_platform($scope.platform);

    });


    /* Find all the platforms cible */

    if ($routeParams.versionCible != null) {
        PlatformService.get($routeParams.application, $routeParams.versionCible).then(function (platforms) {
            $scope.platformsCible = platforms;
        }).then(function () {
            /* If platform was mentionned in the route, try to find it or add it */
            if ($scope.platformCible) $scope.add_platform($scope.platformCible);
        });
    }

...

为什么在我的控制台中出现此错误:

Error: [$rootScope:infdig] 10 $digest() iterations reached. Aborting! Watchers fired in the last 5 iterations: [["fn: parentValueWatch; newVal: [\"Test\"]; oldVal: [\"Test\"]"],["fn: parentValueWatch; newVal: [\"Test\"]; oldVal: [\"Test\"]"],["fn: parentValueWatch; newVal: [\"Test\"]; oldVal: [\"Test\"]"],["fn: parentValueWatch; newVal: [\"Test\"]; oldVal: [\"Test\"]"],["fn: parentValueWatch; newVal: [\"Test\"]; oldVal: [\"Test\"]"]] http://errors.angularjs.org/1.2.21/$rootScope/infdig?p0=10&p1=%5B%5B%22fn%3…%20%5B%5C%22Test%5C%22%5D%3B%20oldVal%3A%20%5B%5C%22Test%5C%22%5D%22%5D%5D
    at http://127.0.0.1:8000/bower_components/angular/angular.js:78:12
    at Scope.$digest (http://127.0.0.1:8000/bower_components/angular/angular.js:12510:19)
    at Scope.$apply (http://127.0.0.1:8000/bower_components/angular/angular.js:12736:24)
    at done (http://127.0.0.1:8000/bower_components/angular/angular.js:8339:45)
    at completeRequest (http://127.0.0.1:8000/bower_components/angular/angular.js:8553:7)
    at XMLHttpRequest.xhr.onreadystatechange (http://127.0.0.1:8000/bower_components/angular/angular.js:8492:11) angular.js:10023(anonymous function) angular.js:10023(anonymous function) angular.js:7327Scope.$apply angular.js:12738done angular.js:8339completeRequest angular.js:8553xhr.onreadystatechange angular.js:8492 Uncaught Error: [$rootScope:infdig] 10 $digest() iterations reached. Aborting! Watchers fired in the last 5 iterations: [["fn: parentValueWatch; newVal: [\"Test\"]; oldVal: [\"Test\"]"],["fn: parentValueWatch; newVal: [\"Test\"]; oldVal: [\"Test\"]"],["fn: parentValueWatch; newVal: [\"Test\"]; oldVal: [\"Test\"]"],["fn: parentValueWatch; newVal: [\"Test\"]; oldVal: [\"Test\"]"],["fn: parentValueWatch; newVal: [\"Test\"]; oldVal: [\"Test\"]"]] http://errors.angularjs.org/1.2.21/$rootScope/infdig?p0=10&p1=%5B%5B%22fn%3…%20%5B%5C%22Test%5C%22%5D%3B%20oldVal%3A%20%5B%5C%22Test%5C%22%5D%22%5D%5D

1 个答案:

答案 0 :(得分:0)

在模板中使用concat会导致每次检查时都会触发concat的评估,每次都会更改concat结果引用。

要理解这一点,这是一个简单的例子

var a = [1, 2];
var b = [3, 4];

var concat1 = a.concat(b);
var concat2 = a.concat(b);

concat1 == concat2 --> FALSE // *NOT* the same reference
angular.equals(concat1, concat2) --> TRUE // same *VALUE*

在ng-repeat指令中更容易解决这个问题的方法是使用TRACK BY表达式。不幸的是,你没有在这里使用ng-repeat,只是将列表传递给你的指令。

所以有两个解决方案:

  • 修改你的list-of-item指令以允许使用track-by表达式(在假设这个指令上使用ng-repeat作为重复机制)
  • 在控制器/链接功能中执行concat逻辑

第二种方法似乎更容易。