Question

我写了一个angularjs服务，它使用下面显示的函数从＆＃34; flat＆＃34;生成树状数组。一。此服务作为控制器的依赖项注入（见下文），并通过服务对象中返回的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, []);
       }

}

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

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

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

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

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

如何阻止此行为？也许在生成特定树后重置服务？

请帮忙。

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

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

指令

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>

控制器

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});

            }]);

Answer 1

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

此外，我没有看到任何让您认为您的服务保留任何州的内容。

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

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

1 个答案: