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

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

只定义1 ng-app到最根HTML元素。（在您的代码<ul>代码中，但理想情况下为<html>代码）
从第二个控制器中删除$scope2，它应该只有$scope。

工作fiddle

Answer 2

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

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

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

然后在HTML中将其作为，

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

Answer 3

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

function popoverCtrl2($scope) {

  $scope.showPopover2 = false;

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

}

无法显示下拉列表和弹出窗口AngularJS

3 个答案: