1

私は Angular を初めて使用し、ルーティングを扱うのはこれが初めてです。質問が少しわかりにくい場合はご容赦ください。このアプリの実際のロジックと構造はもっと複雑で、いくつかのサービスを使用していますが、これは私が問題を抱えている部分の一般的な考え方です。私は本当にあなたの助けに感謝します! ありがとう。

解決した

同じテンプレートを再帰的に追加していました。テンプレート内で、その ng-repeat テンプレートを別のテンプレートに変更したところ、完全に機能しました。 http://jsfiddle.net/GeorgiAngelov/9yN3Z/111/

更新された jsFiddle: http://jsfiddle.net/GeorgiAngelov/9yN3Z/106/

Chandermani のおかげでフィドルを更新しました (すべてのコントローラーを削除し、そのコピーを 1 つだけ残しました)。私にそのエラーを出し続けます...理由がわかりません。

そのため、左側にメニューがあり、セクションと呼ばれる要素をそのメニューに追加できるアプリがあります。そのメニューセクション項目は、コントローラーにあるセクションと呼ばれる配列から派生し、セクションを追加すると、セクションという名前の配列に追加されます。

$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という別の配列があり、 Add Rootという別のボタンを使用して、 $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: '/'
      });
  });
4

0 に答える 0