AngularJS - “10 $ digest()迭代达到”当ng-view ng-repeat依赖于$ routeParams

时间:2013-07-18 15:05:41

标签: angularjs angularjs-service angularjs-routing angularjs-controller

我是Angular的新手,这是我第一次处理路由,所以如果我的问题有点令人困惑,请原谅。我对这个应用程序的实际逻辑和结构要复杂得多,而且我正在使用多种服务,但这是我遇到问题的部分的一般概念。我将衷心感谢您的帮助!感谢。

解决

我递归地添加了相同的模板。在模板内部,我将ng-repeat模板更改为另一个模板,它完美地运行。 http://jsfiddle.net/GeorgiAngelov/9yN3Z/111/

已更新 jsFiddle:http://jsfiddle.net/GeorgiAngelov/9yN3Z/106/

我感谢Chandermani更新了我的小提琴(我删除了所有控制器并只留下了它的一个副本)但是现在每当我点击Add Root按钮或者当我点击时,我就会得到“10 $ digest()迭代”我点击它一直给我错误的部分......不知道为什么。

所以我有一个应用程序,我的左侧有一个菜单,我可以在该菜单中添加更多名为 sections 的元素。该菜单部分项来自位于我的控制器中的名为 sections 的数组,当您添加部分时,它会将其添加到名为的数组中的部分

$scope.sectionId = $routeParams.sectionId;
$scope.sections = [];
$scope.counter = 1;
$scope.section = {};

$scope.addSection = function(){
    $scope.sections.push({
        id: $scope.counter++,
        name: 'Random Name',
        roots: []
    });   
};

* HTML * * *

<body ng-app="myApp" ng-controller="MyController">
        <div class="tabbable tabs-left pull-left">
            <ul class="nav nav-tabs">
                <li ng-repeat="section in sections" ng-click="setSectionSelected(section)" ng-class="{active : isSectionSelected(section)}"><a href="#/section/{{section.id}}" data-toggle="tab">{{section.name}}</a></li>
            </ul>
            <button class="addSection btn btn-success" ng-click="addSection()" style="position:relative; bottom: 0;">Add Section</button>
        </div>
        <div >
            <div class="tab-pane" ng-class="{active : isSectionSelected(section)}" id="{{section.id}}" ng-repeat="section in sections">
            </div>
        </div>
    <div ng-view></div>
</body>

该数组中的每个对象都有另一个名为 roots 的数组,另一个名为添加根的按钮,我想将对象(元素)推送到我目前的任何部分on,取决于$ routeParams id变量。

$scope.addRoot = function(section){
    section.roots.push({
        id: $scope.counter++,
        name: 'Random Root',
    });   
};

从路由器调用的HTML模板

<script type="text/ng-template" id="/tpl.html">
    <div class="map-container">
        <div class="map">
            <h2>{{section.name}}</h2>
            <h4>{{section.description}}</h4>
            <button class="add btn btn-success" ng-click="addRoot(section)">Add Root</button>
            <div ng-repeat="root in section.roots" ng-include="'/tpl.html'"></div>
        </div>
    </div>
</script>

app.config(function ($routeProvider) {
    $routeProvider
      .when('/section', {
        templateUrl: '/tpl.html',
        sectionId: '1',
      })
      .when('/section/:sectionId', {
        templateUrl: '/tpl.html',
      })
      .otherwise({
        redirectTo: '/'
      });
  });

0 个答案:

没有答案