如何在生成数据后停止angularjs服务？

I wrote an angularjs service, which uses function shown below to generate tree-like array from "flat" one. This service is injected as a dependency for a controller(see below) and bound to scope via get() method returned in service object.

我写了一个angularjs服务,它使用下面显示的函数从“flat”生成树状数组。此服务作为控制器的依赖项注入(见下文),并通过服务对象中返回的get()方法绑定到作用域。

var arr = [
  {"id": 1, "firstName": "Macko","parentId": 12},
  {"id": 2, "firstName": "Jess","parentId": 1},
  {"id": 3, "firstName": "Peter","parentId": 1},
  {"id": 4, "firstName": "Lisa", "parentId": 1},
  {"id": 5, "firstName": "Megan","parentId": 1},
  {"id": 6, "firstName": "John", "parentId": 4},
  {"id": 7, "firstName": "Joe", "parentId": 4},
  {"id": 8, "firstName": "Matthew","parentId": 2},
  {"id": 9, "firstName": "Peter","parentId": 2},
  {"id": 10, "firstName": "Dio","parentId": 5},
  {"id": 11, "firstName": "Hello","parentId": 5},
  {"id": 12, "firstName": "Ana", "parentId": 4}
];

var getNestedChildren = function(arr, id, checked) {

  var out = [];
  for (var i = 0; i < arr.length; i++) {
    if (arr[i].parentId === id && checked.indexOf(arr[i].id) === -1) {
      checked.push(id);
      var children = getNestedChildren(arr, arr[i].id, checked);
      if (children.length) {
        arr[i].children = children;
      }
      out.push(arr[i]);
    }
  }
  return out;

};

return {

       get: function (element) {
            return getNestedChildren(arr, element.id, []);
       }

}

I bind this tree to $scope in controller like below. Parameter for generating tree is passed in URL.

我将这个树绑定到控制器中的$ scope,如下所示。生成树的参数在URL中传递。

$scope.tree = myService.get({elementId: $routeParams.elementId});

When I switch routes few times to see trees for different parameters, created tree has more elements each time, until at some point angular returns error

当我多次切换路径以查看不同参数的树时,创建的树每次都有更多的元素,直到某个时刻角度返回错误

Error: [$rootScope:infdig] 10 $digest() iterations reached. Aborting!

My guess is, because myService is a singleton it retains state through routes and that why I get inconsistent data.

我的猜测是,因为myService是一个单例,它通过路由保留状态,这就是为什么我得到不一致的数据。

How can I stop this behaviour? Maybe reset service after it generated particular tree?

我怎么能阻止这种行为?也许在生成特定树后重置服务?

Please help.

EDIT: I tried cleaning $templateCache and $scope while leaving particular view, but without effect. As of now, only browser refresh show correct tree after switching few routes.

编辑:我尝试清理$ templateCache和$ scope,同时留下特定的视图,但没有效果。截至目前,只有浏览器刷新后切换少数路径才能显示正确的树。

As per request showing html that renders tree:

根据请求显示呈现树的html:

Directive

angular.module('app').directive('showTree', [function () {

        return {
            restrict: 'E',
            templateUrl: 'app/tree/tree.tpl.html'
        }

    }]);

tree.tpl.html:

<h3> {{selectedElement.firstName}} {{selectedElement.lastName}}"></h3>
<ul>
    <li ng-repeat="element in tree" ng-include="'tree'"></li>
</ul>

<script type="text/ng-template" id="tree">
    <h3> {{element.firstName}} {{element.lastName}}"></h3>
    <ul>
        <li ng-repeat="element in element.children" ng-include="'tree'"></li>
    </ul>
</script>

Controller

angular.module('app')
        .controller('TreeController', ['$scope', '$routeParams', 'ElementFactory', 'myService',
            function ($scope, $routeParams, ElementFactory, myService) {

                $scope.selectedElement = ElementFactory.get({elementId: $routeParams.elementId});

                $scope.tree = myService.get({elementId: $routeParams.elementId});

            }]);

1 个解决方案

#1

10 digest loops means that you made angulars detecting changes for 10 times in a row on the successive angular's loop.

10个消化循环意味着您在连续角度环上连续10次检测角度变化。

Furthermore i don't see anything that make think that your service is retaining any states.

此外,我没有看到任何让您认为您的服务保留任何州的事情。

I think you have something wrong in your tree indeed, but not with what you posted here. Show us your HTML showing the tree and the controlleralong with it.

我认为你的树确实有问题,但不是你在这里发布的内容。向我们展示你的HTML显示树和controlleralong它。

#1