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

【问题标题】：Unable to display dropdown and popover AngularJS无法显示下拉菜单和弹出 AngularJS
【发布时间】：2017-06-07 08:53:06
【问题描述】：

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

<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/

【问题讨论】：

您是否在代码开头声明了角度？示例： var app = angular.module("myApp", []);

标签： javascript angularjs drop-down-menu popover

【解决方案1】：

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

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

工作fiddle

【讨论】：

谢谢你，但你能告诉我为什么下拉菜单重叠吗？这现在与 css 有关系吗？
@giogio ：是的，css 需要更正。看到这个 demo fiddle 和演示 css。（刚刚添加了一个 margin-top 。，希望它有所帮助:)

【解决方案2】：

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

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

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

然后在 HTML 中这样做，

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

【讨论】：

【解决方案3】：

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

function popoverCtrl2($scope) {

  $scope.showPopover2 = false;

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

}

【讨论】：