1

ナビゲーション項目を出力する単純なコントローラーを実装しようとしています:

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

ただし、機能しません。繰り返しは機能せず、次の出力が得られます。

    <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
4

3 に答える 3

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