Angularjs - 导航栏指令未出现在索引上。html

Question

我是 AngularJS 的新手，正在尝试制作 web 应用程序。

我正在学习 CodeAcademy 的指令，并且我的应用程序决定制作一个指令导航栏，所以每次我需要它时，我都可以调用它。

但问题是，它没有显示在index.html中。 我在我的索引中使用网格。html

我也想知道，在navbarCtrl.js中是否有更好的方法让它像

rest: {'About','Contact','Resources'}而不是一一写出来。

非常感谢

navInfo.html

   <link rel="stylesheet" type="text/css" href="/css/navbar.css" />


<header>
  <div class="nav-placeholder">
    <a href="#" class="logo"><img src="/img/letter-y.png" ng-src="{{info.icon}}" /></a>
    <i class="menu-toggle-btn"></i>
    <nav class="navigation-menu">
      <a class="title" href="#">{{info.title}}</a>
      <a class="rest" href="#">{{info.rest}}</a>
      <a class="rest" href="#">{{info.rest}}</a>
      <a class="rest" href="#">{{info.rest}}</a>
    </nav>
  </div>
</header>

导航栏Ctrl.js

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

app.controller('navbarCtrl', ['$scope', function($scope) {
    $scope.navs = [ 
        {
          icon: '/img/letter-y.png',
          title: 'Yedy',
          rest: 'About',
          rest: 'Contact',
          rest: 'Resources'
        }
      ];
  }]);

navbarDirective.js

app.directive('navInfo', function(){
    return{
        restrict: 'E',
        scope:{
            info:'='
        },
        templateUrl: 'src/js/directives/navInfo.html'
    };
})

索引.html

<body ng-app="AppYedy">
    <!-- Navbar -->
    <div class="header" ng-controller="navbarCtrl">
      <div ng-repeat="nav in navs">
        <nav-info info="nav"></nav-info>
      </div>
    </div>