Question

我正在尝试实现一个简单的控制器来输出导航项：

index.html中的

我有以下内容：

   <nav ng-controller="Nav">
        <ul>
            <li ng-repeat="c in catalog">
                {{c.name}}
                <p>{{c.url}}</p>
            </li>
        </ul>
    </nav>

并在controllers.js中我有：

'use strict';

/* Controllers */

angular.module('c.controllers', []).
  controller('MyCtrl1', [function() {

  }])
  .controller('MyCtrl2', [function() {

  }])
    .controller('Nav', function Nav($scope) {
        $scope.catalog = [
            {'name': 'Nav 1',
                'url': '#/view1'},
            {'name': 'Nav 2',
                'url': '#/view2'},
            {'name': 'Nav 3',
                'url': '#/view3'}
        ];
    });

它不起作用，重复dosnt工作，我只是得到以下输出：

    <nav  ng-controller="Nav">
        <ul>
            <li ng-repeat="c in catalog">
                {{c.name}}
                <p>{{c.url}}</p>
            </li>
        </ul>
    </nav>

我做错了，还是根本没做过？

编辑：

我的html标签上有以下内容：

<html lang="en" ng-app="myApp">

我可以在控制台中看到以下错误：

Uncaught Error: [$injector:modulerr] Failed to instantiate module myApp due to:
Error: [$injector:modulerr] Failed to instantiate module myApp.controllers due to:
Error: [$injector:nomod] Module 'myApp.controllers' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument

Answer 1

您是否已将ng-app包含在某处（http://docs.angularjs.org/api/ng.directive:ngApp）？

例如：

 <html ng-app='c.controllers'>

通常当双卷曲{{}}出现时，因为Angular尚未看到ng-app。

编辑：以下是一起设置模块和控制器的示例（来自http://docs.angularjs.org/tutorial/step_02）

 var phonecatApp = angular.module('phonecatApp', []);

 phonecatApp.controller('PhoneListCtrl', function PhoneListCtrl($scope) {
    $scope.phones = [
    {'name': 'Nexus S',
    'snippet': 'Fast just got faster with Nexus S.'},
    {'name': 'Motorola XOOM™ with Wi-Fi',
    'snippet': 'The Next, Next Generation tablet.'},
    {'name': 'MOTOROLA XOOM™',
   'snippet': 'The Next, Next Generation tablet.'}
   ];
 });

Answer 2

您似乎错误地命名了模块名称

<html ng-app="App">
    <div ng-controller="AppCtrl">

需要一个名为App的模块，其中有一个名为AppCtrl的控制器

angular.module('App', [])
    .controller('AppCtrl', function ($scope) {
        console.log('AppCtrl', this);
    });

Answer 3

更改此

<html lang="en" ng-app="myApp">

到此

<html lang="en" ng-app="c.controllers">

但在我看来，将当前模块的名称更改为更好的

角度 - 简单的控制器理解

3 个答案: