Angular 1.5 引导弹出窗口未按预期运行答案

【问题标题】：Angular 1.5 bootstrap popover isn't functioning as expectedAngular 1.5 引导弹出窗口未按预期运行
【发布时间】：2018-06-20 10:05:19
【问题描述】：

我正在尝试让弹出框在我目前正在开发的测试应用程序上工作。我已经这样加载了 HTML：

<button uib-popover-template="'popover-content.html'" popover-title="test" type="button" popover-placement="'bottom'" class="btn btn-default">
  testingPopover
</button>

<script type="text/ng-template" id="popover-content.html">
    <div>
      <label>You have no new</label>
    </div>
</script>

我的索引文件里面有（它调用所有这些其他组件）：

<!DOCTYPE html>
<html ng-app="app">

<head>
  <style>
    /* This helps the ng-show/ng-hide animations start at the right place. */
    /* Since Angular has this but needs to load, this gives us the class early. */

    .ng-hide {
      display: none!important;
    }
  </style>
  <title ng-bind="title">
    toDoList
  </title>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1" />
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />
  <base href="/">

  <!-- build:css styles/lib.css -->
  <!-- bower:css -->
  <link rel="stylesheet" href="/bower_components/bootstrap/dist/css/bootstrap.css" />
  <link rel="stylesheet" href="/bower_components/font-awesome/css/font-awesome.css" />
  <link rel="stylesheet" href="/bower_components/toastr/toastr.css" />
  <!-- endbower -->
  <!-- endbuild -->

  <!-- build:css styles/app.css -->
  <!-- inject:css -->
  <link rel="stylesheet" href="/.tmp/styles.css">
  <!-- endinject -->
  <!-- endbuild -->
  <link rel="stylesheet" href="/src/client/styles/styles1.css">
</head>

<body>
    <div class="container formatting">
      <div class="row">
        <div class="col-xs-12" >
          <div ui-view></div>
        </div>
      </div>
    </div>

  <!-- build:js js/lib.js -->
  <!-- bower:js -->
  <script src="/bower_components/jquery/dist/jquery.js"></script>
  <script src="/bower_components/angular/angular.js"></script>
  <script src="/bower_components/angular-animate/angular-animate.js"></script>
  <script src="/bower_components/angular-sanitize/angular-sanitize.js"></script>
  <script src="/bower_components/bootstrap/dist/js/bootstrap.js"></script>
  <script src="/bower_components/extras.angular.plus/ngplus-overlay.js"></script>
  <script src="/bower_components/moment/moment.js"></script>
  <script src="/bower_components/angular-ui-router/release/angular-ui-router.js"></script>
  <script src="/bower_components/toastr/toastr.js"></script>
  <script src="/bower_components/angular-bootstrap/ui-bootstrap-tpls.js"></script>
  <script src="/bower_components/ng-lodash/build/ng-lodash.js"></script>
  <!-- endbower -->
  <!-- endbuild -->

  <!-- build:js js/app.js -->
  <!-- inject:js -->
  <script src="/src/client/app/app.module.js"></script>
  <script src="/src/client/app/blocks/exception/exception.module.js"></script>
  <script src="/src/client/app/blocks/logger/logger.module.js"></script>
  <script src="/src/client/app/blocks/router/router.module.js"></script>
  <script src="/src/client/app/core/core.module.js"></script>
  <script src="/src/client/app/layout/layout.module.js"></script>
  <script src="/src/client/app/app.states.js"></script>
  <script src="/src/client/app/blocks/exception/exception-handler.provider.js"></script>
  <script src="/src/client/app/blocks/exception/exception.js"></script>
  <script src="/src/client/app/blocks/logger/logger.js"></script>
  <script src="/src/client/app/blocks/router/router-helper.provider.js"></script>
  <script src="/src/client/app/core/constants.js"></script>
  <script src="/src/client/app/layout/connection-service.js"></script>
  <script src="/src/client/app/layout/creation.component.js"></script>
  <script src="/src/client/app/layout/display.component.js"></script>
  <script src="/src/client/app/layout/list.component.js"></script>
  <script src="/src/client/app/layout/media.component.js"></script>
  <script src="/src/client/app/layout/todoList.component.js"></script>
  <script src="/src/client/app/layout/btnPopover.component.js"></script>
  <!-- endinject -->

  <!-- inject:templates:js -->
  <!-- endinject -->
  <!-- endbuild -->
</body>

</html>

当我运行代码时，“testingPopover”按钮成功显示，但是当我单击此按钮时，没有弹出窗口显示。我希望有人能指出我正确的方向，我一直在引用https://angular-ui.github.io/bootstrap/ 来构建我到目前为止所拥有的东西。

【问题讨论】：

标签： angularjs angular-ui-bootstrap

【解决方案1】：

此后我一直在继续调查并找到问题的答案，对于那些正在寻找可能与我描述的问题类似的问题的答案的人，我将重点介绍我的过程。

问题是在模块中包含引导程序时出现错误，在我作为依赖项添加到“ui.bootstrap”中的 app.module.js 文件中。

我的 app.module.js 现在看起来像这样：

(function() {
  'use strict';

  angular.module('app', [
    'app.core',
    'app.ui.router',
    'app.layout',
    'ui.bootstrap'
  ]);
})();

我认为问题在于，在应用程序中正确定义的 ui.bootstrap 实际上根本不是依赖项，因此没有运行（也许有人可以评论确认）。

感谢那些花时间编辑的人，看看这篇文章。

【讨论】：