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；您需要将内部 UL 放在 LI 中。）

现在我不知道 之外存在什么ul，所以我只是将它设置为div，我们告诉视图将哪个控制器分配给页面的该部分。所以现在我们的控制器必须将这些变量放在作用域上：

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

现在它将起作用。至于你的其余loadFromMenu功能，大部分你会想要移植到你的控制器，但我不确定你想用那个run块或loadFromMenu函数做什么。所以这里有一个一般原则：服务数据的通用操作应该发生在服务中。

随意发表评论以提供更多信息，我将更新此答案，但 ngRepeat 不起作用的原因是因为您没有控制器并且您的sections变量从未分配给范围。

于 2013-03-07T18:35:08.290 回答