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]参数＆＃39;导航＆＃39;不是一个功能，未定义 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） at nodeLinkFn（angular.js：7586）在compositeLinkFn（angular.js：7078）在compositeLinkFn（angular.js：7081）在compositeLinkFn（angular.js：7081）

我使用角度版本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: "/#"
    }
  ];

})();

创建控制器以管理站点导航angularjs

1 个答案: