                        课程
                    
                        /前端开发
                        
                            /Angular
                        
                        /AngularJS实战

弹出的对话框怎么配置路由

使用$modal.open()弹出的对话框中想要使用tabs进行切换，每个tab显示的内存配置一个模板文件。请问这个路由怎么弄。

w032425

2015-05-29

源自：AngularJS实战 2-7

关注问题我要回答

797

操作

收起

1 回答

慕的地5081625
2016-07-10

<!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>