无法将引导模式窗口作为路由打开

Unable to open bootstrap modal window as a route

本文关键字：路由 窗口 模式      更新时间：2023-09-26

我正在使用bootstrap来显示模态，并希望它在点击锚标记时显示为路由。但是我得到了一个模块错误&似乎不知道如何解决。

HTML

<div ng-view>
    <div ng-controller="DetailPageCtrl">
      <a href="#/profile">Click here to open modal!</a>
    </div>
    <script type="text/ng-template" id="modalContainer">
        <div ng-controller="ProfileModalCtrl"></div>
    </script>
</div>

JS-

var app = angular.module('plunker', ['ui.bootstrap']);
app.config(function($routeProvider) {
   $routeProvider
      .when('/profile', {
          templateUrl : 'modalContainer',
          controller : 'ProfileModalCtrl'
      });
})
app.controller('DetailPageCtrl', function($scope) {
   console.log("detail page");
});
app.controller('ProfileModalCtrl', function($scope, $modal) {
    $modal.open({templateUrl : 'modal.html'});
});

plnkr中的代码：http://plnkr.co/edit/VbvuWzLqkICFzBYI9sL5?p=preview

Demo问题重重。您没有包含angular-route.js。您没有使用otherwise提供默认路径，而是将html放置在ng-view 中

/* include script tag with `angular-route.js , then inject as dependency*/
var app = angular.module('plunker', ['ui.bootstrap', 'ngRoute']);
app.config(function($routeProvider) {
  $routeProvider.when('/', {
    templateUrl: 'default'
  })
    .when('/profile', {
      templateUrl: 'modalContainer',
      controller: 'ProfileModalCtrl'
    }).otherwise({
      redirectTo: '/'
    })
});

<div ng-view><!-- leave empty --></div>

演示

您还将遇到在标记中声明与路由配置中相同的ng-controller的问题。。。选择一个或另一个

您的plunker缺少ngRoute依赖项。在angular的较新版本中，ngRoute是一个单独的库，需要单独包含并声明为应用程序模块的模块依赖项：

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.4/angular.js"></script>
<script src="http://code.angularjs.org/1.2.4/angular-route.js"></script>

var app = angular.module('plunker', ['ngRoute', 'ui.bootstrap']);

此外，您的路线尚未完全定义。

此外，您的模板（<script type="text/ng-template">）是在<div ng-view>元素中定义的。ng-view是一个指令，它将在解析路由时替换hostdiv元素的内容，因此模板的更好位置是在ng-view元素之外。

固定插头

var app = angular.module('plunker', ['ngRoute', 'ui.bootstrap']);
app.config(function($routeProvider) {
 $routeProvider
  .when('/profile', {
    templateUrl : 'modalContainer',
    controller : 'ProfileModalCtrl'
  })
  .when('/detail', {
    templateUrl : 'detail.html',
    controller : 'DetailPageCtrl'
  })
  .otherwise({redirectTo: '/detail'});
});
app.controller('DetailPageCtrl', function($scope) {
 console.log("detail page");
});
app.controller('ProfileModalCtrl', function($scope, $modal) {
  $modal.open({templateUrl : 'modal.html'});
});

<!doctype html>
<html ng-app="plunker">
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.4/angular.js"></script>
    <script src="http://code.angularjs.org/1.2.4/angular-route.js"></script>
    <script src="http://angular-ui.github.com/bootstrap/ui-bootstrap-tpls-0.7.0.js"></script>
    <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet">
  </head>
  <body>
    <div ng-controller="DetailPageCtrl">
      <a href="#/profile">Click here to open modal!</a>
    </div>
    <script type="text/ng-template" id="modalContainer">
        <div ng-controller="ProfileModalCtrl"></div>
    </script>
    <div ng-view></div>
</body>
<script src="script.js"></script>
</html>
相关文章：