0

Angularアプリをリファクタリングして、ファクトリサービスを介して重要なデータを渡しました。突然、ng-repeatはページに何も出力せず、まったく実行されず、エラーメッセージも表示されません。どうしたの？

<ul ng-repeat="section in sections">
    <li  class="section_title {{section.active}}" >
        {{section.name}}
    </li>
    <ul>
        <li class="tutorial_title {{tutorial.active}}" ng-click="loadFromMenu([$parent.$index, $index])" ng-repeat="tutorial in AppData.section.tutorials">
            {{tutorial.name}}
        </li>
    </ul>
</ul>


    var Tutorials = angular.module('Tutorials', ['functions', 'tutorials']);

Tutorials.factory("AppData", function(){
    return { 
        sectionNumber: 0,
        tutorialNumber: 0,
        questionNumber: 0,
        sections: sections
    }
})

Tutorials.run(function(AppData){loadFromMenu([0,0, true], AppData);})

function loadFromMenu (tut, AppData) {
    if (tut[1] === AppData.tutorialNumber && tut[0] === AppData.sectionNumber && !tut[2]) {//if clicked on already playing tut
        return;
    } 
    if (tut[1] !== undefined && tut[0] !== undefined) {
        AppData.tutorialNumber = tut[1];
        AppData.sectionNumber = tut[0];
    }
    var section = AppData.sections[tut[0]];
    for (var x in AppData.sections) {
        AppData.sections[x].active = "inactive";
        for (var y in AppData.sections[x].tutorials){
            AppData.sections[x].tutorials[y].active = "inactive";
        }
    }
    section.active = "active";
    section.tutorials[tut[1]].active = "active";
    //$scope.$apply();
    AppData.questionNumber = 0;
    if (AppData.sectionNumber === 1){
        conjugationController();
    }
};
4

1 に答える 1

2

コードに基づくと、問題は実際にコントローラーを使用していないことです。コントローラーは、サービスから取得したものを割り当てるスコープにプログラムでアクセスする方法です。ビューはスコープにも関連付けられています。したがって、 と言うとng-repeat="section in sections"、現在のスコープで と呼ばれるプロパティを探していますsections。ほとんどの場合、これはコントローラー内の$scope.sections = .... あなたのコードにはこのようなものは何もありません。これがどのように機能するかです。

<div ng-controller="MainCtrl">
  <ul ng-repeat="section in sections">
    <li  class="section_title {{section.active}}" >
      {{section.name}}
    </li>
    <ul>
      <li class="tutorial_title {{tutorial.active}}" ng-click="loadFromMenu([$parent.$index, $index])" ng-repeat="tutorial in AppData.section.tutorials">
        {{tutorial.name}}
      </li>
    </ul>
  </ul>
</div>

(PS: UL を入れ子にする方法は、実際には有効な HTML ではありません。LI に内側の UL を配置する必要があります。)

の外側に何が存在するのかわからないulので、 にしましたdiv。ここで、ページのそのセクションに割り当てるコントローラーをビューに指示しました。したがって、コントローラーはこれらの変数をスコープに配置する必要があります。

Tutorials.controller( 'MainCtrl', function ( AppData ) {
  $scope.sections = AppData.sections;
});

そして今、それはうまくいくでしょう。関数の残りの部分については、そのほとんどをコントローラーに移植する必要がありますが、そのブロックまたは関数でloadFromMenu何をしようとしているのかわかりません。したがって、ここに一般原則があります。サービス データの一般的な操作は、サービス内で行う必要があります。runloadFromMenu

詳細についてはコメントを投稿してください。この回答を更新しますが、ngRepeat が機能しない理由は、コントローラーがなく、sections変数がスコープに割り当てられていないためです。

于 2013-03-07T18:35:08.290 に答える