Question

我正在尝试让弹出窗口在当前正在运行的测试应用程序上运行。我已经这样加载了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/来构建到目前为止的内容。

Answer 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实际上根本不是依赖项，因此没有运行（也许有人可以评论以确认）。

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

Angular 1.5引导程序弹出窗口无法正常运行

1 个答案: