1

I am trying to implement a simple controller to output navigation items:

in index.html I have the following:

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

and in controllers.js I have:

'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'}
        ];
    });

It doesnt work though, the repeat dosnt work and i just get the following output:

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

Have have I done wrong, or havent done at all?

EDIT:

I have the following on my html tag:

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

I can see the following error in the console:

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
4

3 回答 3

1

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

例如：

 <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.'}
   ];
 });
于 2013-10-22T21:55:58.663 回答
0

改变这个

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

对此

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

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

于 2013-10-22T21:59:42.047 回答
0

看起来您错误地命名了模块名称

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

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

angular.module('App', [])
    .controller('AppCtrl', function ($scope) {
        console.log('AppCtrl', this);
    });
于 2013-10-22T21:56:54.063 回答