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

Question

我正在使用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

Answer 1

演示受到问题的困扰.你没有包括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>

DEMO

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