Question

重新考虑我的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();
    }
};

Answer 1

根据您的代码，您的问题是您实际上使用控制器 。控制器是我们以编程方式访问范围的方式，我们将从服务中分配的内容分配给该范围。视图也与范围有关。因此，当您说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功能的其余部分，大多数你想要移植到你的控制器，但是我不确定你在尝试用{{1}做什么阻止或使用run函数。所以这是一个一般原则：服务数据的通用操作应该在服务中发生。

随意发布包含更多信息的评论，我会更新此答案，但ngRepeat无法正常工作的原因是因为您没有控制器且您的loadFromMenu变量从未分配过到范围。

ng-repeat什么都不做

1 个答案: