javascript 无法打开引导模式窗口作为路由
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20585541/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Unable to open bootstrap modal window as a route
提问by user1184100
I'm using bootstrap to display a modal and want it to be shown on click of a anchor tag as a route. But i'm getting a module error & can't seem to figure out how to resolve it.
我正在使用引导程序来显示模态，并希望在单击锚标记时将其显示为路线。但是我收到一个模块错误并且似乎无法弄清楚如何解决它。
HTML
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
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'});
});
Code in plnkr : http://plnkr.co/edit/VbvuWzLqkICFzBYI9sL5?p=preview
plnkr 中的代码：http://plnkr.co/edit/VbvuWzLqkICFzBYI9sL5?p=preview
回答by charlietfl
Demo is plagued with problems. You haven't included angular-route.js. You didn't provide a default path using otherwiseand you placed html within ng-view
演示被问题所困扰。您尚未包含 angular-route.js。您没有提供默认路径 usingotherwise并且您将 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>
You will also run into problems declaring same ng-controllerin markup as in route config...pick one or the other
您还会遇到ng-controller在标记中声明与路由配置相同的问题...选择一个或另一个
回答by Stewie
Your plunker is missing the ngRoutedependency. In newer versions of angular, ngRouteis a separate library that needs to included separately and declared as a module dependency to your app module:
您的 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']);
Also, your routes are not fully defined.
此外，您的路线还没有完全定义。
Also, your templates (<script type="text/ng-template">) are defined inside the <div ng-view>element. ng-viewis a directive which will replace the content of host div element when route is resolved, so a better place for your templates is outside of ng-viewelement.
此外，您的模板 ( <script type="text/ng-template">) 是在<div ng-view>元素内定义的。ng-view是一个指令，它将在路由解析时替换宿主 div 元素的内容，因此模板的更好位置是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>
