angular 简单指令不起作用

Question

我是 angular 的新手，对此感到非常兴奋。我正在尝试将我的顶级导航放入一个指令中，这样它就可以 1) 可重用 2) 使我的 html 更易于阅读

但是我无法让我的 topMenu 指令在我的生活中发挥作用。是否可以扫一眼我的 fiddle 看看我做错了什么？非常感谢，我正在掉头发哈哈

http://jsfiddle.net/g6pb0m4a/ 这是我的 menu.js 文件

    //define menu controller
 var menu =  angular.module('MenuApp', [])
    menu.controller('MenuCtrl', [function() {
      var self = this;
      self.active= '1';
      self.navigation = [
    {
        menutext:"Home",
        url:"#/"
    },
    {
        menutext:"About App",
        url: "#/aboutapp",
        submenu:[
        {
            menutext:"Pricing",
            url: "#/pricing"
        }
        ]
    }
    ];

  }]);

menu.directive('topMenu', function() {
  return {
    restrict: 'E',
    template: '<h2>test</h2>'
  };
});

这是我的索引

<!DOCTYPE html>
<html>
<head>
<title>Fit Bit App</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script>
<link href="css/default.css" rel="stylesheet">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
<script src ="app/controllers/menu.js"></script>
</head>

<body ng-app="MenuApp">
<header>
     <nav class="navbar navbar-inverse" data-ng-controller = "MenuCtrl as menuCtrl">
      <div class="container-fluid">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">WebSiteName</a>
        </div>
        <div class="collapse navbar-collapse" id="myNavbar">
          <ul class="nav navbar-nav" data-ng-repeat = "menuitem in menuCtrl.navigation">
            <li ng-if="!menuitem.submenu"><a href={{menutext.url}}>{{menuitem.menutext}}</a></li>
            <li class="dropdown" ng-if="menuitem.submenu"><a class="dropdown-toggle" data-toggle="dropdown" href="#">{{menuitem.menutext}}<span class="caret"></span></a>
                <ul class="dropdown-menu">
                    <li data-ng-repeat = "submenu in menuitem.submenu"><a href={{submenu.url}}>{{submenu.menutext}}</a></li>
                </ul>
            </li>
          </ul>
          <ul class="nav navbar-nav navbar-right">
            <li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
            <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
          </ul>
        </div>
      </div>
    </nav>

</header>

<div><top-menu></top-menu></div>

</body>
</html>

Answer 1

您的问题主要是因为您注册应用程序和控制器的位置。在您的 fiddle 中，您正在使用选项 onLoad，因此 jsfiddle 将在 window.onload 内的脚本面板中加载脚本，这发生在 angular 尝试 bootstrap 应用程序在 html 中找到 ng-app 指令。不要使用 onLoad 选项，而是使用 wrap in body（或 head）选项，以便脚本面板中的脚本事先获得运行 angular 实例化您的应用程序 MenuApp。 Working Fiddle

angular 简单指令不起作用

angular simple directive not working

angularjs

angularjs-directive