创建一个控制器来管理站点导航 angularjs

Question

我正在尝试使用ng-repeat 轻松管理我网站上的导航。这是我的导航代码：

html:

<div class="collapse navbar-collapse" id="js-navbar-collapse" ng-controller="Navigation as AppNav">

  <ul class="nav navbar-nav">
       <li ng-repeat="appLinks in AppNav.appLinks"><a href={{AppNav.appLinks.Page}}>{{AppNav.appLinks.Page}}</a></li> 
  </ul>
</div>

这是我的 Navigation.js 控制器代码：

'use strict';

(function(){
var app = angular.module('AppNav', [ ]);
app.controller('Navigation', function(){
    this.appLinks = gems;

    });
var gems = [
    {
        Page: 'Home Page',
        Link: '"#"'
    },
    {
        Page: 'About',
        Link: '"#/about"'
    },
    {
        Page: 'Contact',
        Link: '"#:'
    }
];
})();

我不断收到此错误：

获取http://localhost:9000/scripts/controllers/navigation.js angular.js:11607 错误：[ng:areq] 参数“导航”不是 函数，未定义 http://errors.angularjs.org/1.3.14/ng/areq?p0=Navigation&p1=not%20a%20function%2C%20got%20undefined 在 REGEX_STRING_REGEXP (angular.js:63) 在 assertArg (angular.js:1580) 在 assertArgFn (angular.js:1590) 在 angular.js:8431 在 angular.js:7599 在 forEach (angular.js:331) 在 nodeLinkFn (angular.js:7586) 在compositeLinkFn (angular.js:7078) 在compositeLinkFn (angular.js:7081) 在 CompositeLinkFn (angular.js:7081)

我使用的是 Angular 版本 v1.3.14。提醒一下，我对 angular.js 和应用程序构建非常陌生，所以如果你能提供帮助，请告诉我我做错了什么以及代码示例。

非常感谢大家提前提供的帮助！

app.js 的内容：

'use strict';

/**
 * @ngdoc overview
 * @name testappApp
 * @description
 * # testappApp
 *
 * Main module of the application.
 */
angular
  .module('testappApp', [
    'ngAnimate',
    'ngAria',
    'ngCookies',
    'ngMessages',
    'ngResource',
    'ngRoute',
    'ngSanitize',
    'ngTouch'
  ])
  .config(function ($routeProvider) {
    $routeProvider
      .when('/', {
        templateUrl: 'views/main.html',
        controller: 'MainCtrl'
      })
      .when('/about', {
        templateUrl: 'views/about.html',
        controller: 'AboutCtrl'
      })
      .otherwise({
        redirectTo: '/'
      });
  });

Main.js：

'use strict';

describe('Controller: MainCtrl', function () {

  // load the controller's module
  beforeEach(module('testappApp'));

  var MainCtrl,
    scope;

  // Initialize the controller and a mock scope
  beforeEach(inject(function ($controller, $rootScope) {
    scope = $rootScope.$new();
    MainCtrl = $controller('MainCtrl', {
      $scope: scope
    });
  }));

  it('should attach a list of awesomeThings to the scope', function () {
    expect(scope.awesomeThings.length).toBe(3);
  });
});

Answer 1

WORKING DEMO

HTML：

<div class="collapse navbar-collapse" id="js-navbar-collapse" ng-controller="Navigation as AppNav">

  <ul class="nav navbar-nav">
       <li ng-repeat="appLinks in AppNav.appLinks"><a ng-href={{appLinks.Link}}>{{appLinks.Page}}</a></li> 
  </ul>
</div>

您错误地引用了 Page 和 Link 属性。这就是为什么没有显示数据。在ng-repeat 中，您有appLinks in AppNav.appLinks，但在li 标签内，您使用的是指向数组的AppNav.appLinks.Page。相反，您必须使用appLinks.Page

控制器：

(function(){
  'use strict';

var app = angular.module('AppNav', [ ]);
app.controller('Navigation', function(){
    this.appLinks = gems;
    });



     var gems = [
    {
        Page: 'Home Page',
        Link: "/#"
    },
    {
        Page: 'About',
        Link: "/#/about"
    },
    {
        Page: 'Contact',
        Link: "/#"
    }
  ];

})();