无法显示下拉菜单和弹出框 AngularJS

Question

我是新手，你能帮我弄清楚为什么我的下拉菜单不能正常显示，而且下拉菜单的第二个值的弹出窗口不能正常工作吗？我有点困惑，因为这是我第一次尝试这个。这是我的代码

<ul class="nav site-nav">
<li class=flyout>
    <a href=#>Menu</a>

<!-- Flyout -->
<ul class="flyout-content nav stacked">
  <li>
    <div ng-app>
      <div ng-controller="popoverCtrl">
        <a href="#" ng-mouseover="showPopover=true;" ng-mouseleave="showPopover=false;">Real Account <div class="popover" ng-show="showPopover"><span>{{ popover.title }}</span>{{ popover.message }}</div></a>
      </div>
    </div>
  </li>
  <li>
    <div ng-app>
      <div ng-controller="popoverCtrl2">
        <a href="#" ng-mouseover="showPopover2=true;" ng-mouseleave="showPopover2=false;">Practice Account <div class="popover2" ng-show="showPopover2"><span>{{ popover2.title }}</span>{{ popover2.message }}</div></a>
      </div>
    </div>
  </li>


</ul>

和我的 JS

function popoverCtrl($scope) {

  $scope.showPopover = false;

  $scope.popover = {
    title: 'Title',
    message: 'Message'
  };

}

function popoverCtrl2($scope2) {

  $scope2.showPopover2 = false;

  $scope2.popover2 = {
    title: 'Test',
    message: 'Sample'
  };
}

这是我目前所做的http://jsfiddle.net/fn1aj1e6/

Answer 1

您必须首先使用 AngularJS 函数 angular.module 创建模块。例如：

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

    myApp.controller('YourController', function ($scope) {
        //Your code
    });

然后在 HTML 中做为，

    <div ng-app="app">...</div>

Answer 2

您不能使用 function popoverCtrl2($scope2)，因为 Angular 将解析依赖项注入的参数名称，并且不会找到名称为 $scope2 的服务。只需使用：

function popoverCtrl2($scope) {

  $scope.showPopover2 = false;

  $scope.popover2 = {
    title: 'Test',
    message: 'Sample'
  };

}

Answer 3

您需要更正代码中的以下内容：

仅定义 1 个 ng-app，到最根 HTML 元素。（在您的代码 <ul> 标签中，但最好是 <html> 标签）
从第二个控制器中删除 $scope2。它应该只是 $scope。

工作fiddle

无法显示下拉菜单和弹出框 AngularJS

Unable to display dropdown and popover AngularJS

javascript

angularjs

drop-down-menu

popover