弹出的对话框怎么配置路由
使用$modal.open()弹出的对话框中想要 使用tabs进行切换，每个tab显示的内存配置一个模板文件。请问这个路由怎么弄。
1 回答
<!DOCTYPE html>
<html lang="zh-CN" ng-app="tabsApp">
<head>
<meta charset="UTF-8">
<title>AngularJS Demo 3 -- 选项卡</title>
<link rel="stylesheet" href="../../bootstrap-3.3.5/css/bootstrap.css">
<!-- 请看这份代码 -->
</head>
<body>
<div class="container" ng-controller="tabsAppCtrl">
<h2>选项卡</h2>
<ul class="nav nav-pills">
<li role="presentation"
ng-repeat="tab in tabs"
ng-click="clickTab(tab)"
ng-class="isTab(tab.content)">
<a href="#">{{ tab.name }}</a>
</li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane active"
ng-include="currentTab">
</div>
</div>
<!-- 模板 -->
<script type="text/ng-template" id="home.tpl.html">
This is Home page !
</script>
<script type="text/ng-template" id="profile.tpl.html">
This is Profile page !
</script>
<script type="text/ng-template" id="messages.tpl.html">
This is Messages page !
</script>
</div>
<script src="../../angular-1.5.7/angular.js"></script>
<script>
var app = angular.module('tabsApp', []);
app.controller('tabsAppCtrl', function($scope, $http) {
// 初始量
// $http.get('./tabs.json').success(function(response) {
// $scope.tabs = response.tabs;
// });
$scope.tabs = [
{ 'name': 'Home', 'content': 'home.tpl.html' },
{ 'name': 'Profile', 'content': 'profile.tpl.html' },
{ 'name': 'Messages', 'content': 'messages.tpl.html' }
];
$scope.currentTab = 'home.tpl.html';
$scope.clickTab = function(tab) {
$scope.currentTab = tab.content;
};
$scope.isTab = function(tabContent) {
return { 'active': ($scope.currentTab == tabContent) };
};
});
</script>
</body>
</html>举报
0/150
提交
取消
