AngularJS $ routeprovider路由在Mutitab

我用這個例子來構建登錄頁面

一旦登錄到該應用程序，如下面的例子中提到的主屏幕應該具有多標籤視圖

<ul class="nav nav-tabs" ng-controller="TabsCtrl"> 
    <li ng-class="tabClass(tab)" ng-repeat="tab in tabs" tab="tab"><a href="{{tab.link}}" ng-click="setSelectedTab(tab)">{{tab.label}}</a></li> 
</ul>

我現在面臨的問題是多片未嵌入作爲單頁應用程序。正如演示中提到的那樣，它應該嵌入在相同的視圖中，但是一旦我整合了，它就表現出不同的視角。例如，當我點擊作業時，它將轉到新的html頁面，但不包含在與plunker演示相同的視圖中。我想使用angularjs路由提供程序而不是狀態提供程序，原因是登錄身份驗證示例最好，而我不想改變整個邏輯。

來源

2016-01-18 Senthil

很難做出任何意義了您的具體問題是什麼。 – charlietfl

更新

版本1（無路由）Plunker Demo

如果使用#/jobs語法它會重定向到一個新的視角。這裏是一個沒有路線的完整工作解決方案：

您的代碼plunker正在工作，因爲您沒有在代碼中包含ngRoute。

觀plunker demo

app.js

$scope.tabs = [ 
    { id : 'jobs', label : 'Jobs', templateUrl:'jobs-partial.html' }, 
    { id : 'invoices', label : 'Invoices',templateUrl: 'invoices-partial.html' }, 
    { id : 'payments', label : 'Payments',templateUrl: 'payments-partial.html' } 
]; 

$scope.activeTab = $scope.tabs[0];  
$scope.changeActiveTab = function (tab) { 
    $scope.activeTab = tab; 
    }; 

$scope.isActiveTab = function (tabId) { 
    return tabId === $scope.activeTab; 
    }

內index.html

<body ng-controller="TabsCtrl"> 
<ul class="nav nav-tabs" > 
    <li ng-class="{active: isActiveTab(tab.id)}" ng-repeat="tab in tabs"> 
      <a href="" ng-click="changeActiveTab(tab.id)" data-toggle="tab">{{tab.label}} </a> 
      </li> 
</ul> 

<div class="tab-content"> 
     <div class="tab-pane fade" ng-class="{'in active': isActiveTab(tab.id)}" ng-repeat="tab in tabs" 
      ng-include="tab.templateUrl"> 
     </div> 
    </div> 
</body>

第2版（帶路由）Plunker Demo

index.html

<!DOCTYPE html> 
<html ng-app="plunkerApp"> 
<head> 
    <meta charset="utf-8" /> 
    <title>AngularJS Plunker</title> 
<script>document.write('<base href="' + document.location + '" />');</script> 
<link rel="stylesheet" href="style.css" /> 
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet"> 
<script src="https://code.angularjs.org/1.4.8/angular.js"></script> 
<script src="https://code.angularjs.org/1.4.8/angular-route.js"></script> 
<script src="app.js"></script> 
    </head> 
    <body> 
    <div ng-view></div> 
</body> 
    </html>

app.js

angular 
    .module('untitled4App', [ 
    'ngRoute' 
    ]) 
    .config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) { 
    $routeProvider.when('/jobs', { 
     templateUrl: '/views/jobs-partial.html', 
     controller: 'JobsCtrl' 
    }).when('/invoices', { 
     templateUrl: '/views/invoices-partial.html', 
     controller: 'InvoicesCtrl' 
    }).when('/payments', { 
     templateUrl: '/views/payments-partial.html', 
     controller: 'PaymentsCtrl' 
    }); 

    // make this demo work in plunker 
    $locationProvider.html5Mode(false); 
    }]) 
    .factory('tabsService', function() { 
    return { 
     tabs: function() { 
     return [ 
      {id: 'jobs', label: 'Jobs'}, 
      {id: 'invoices', label: 'Invoices'}, 
      {id: 'payments', label: 'Payments'} 
     ] 
     }, 
     activeTab: '', 
     isActiveTab: function (tabId) { 
     return tabId === this.activeTab; 
     } 
    } 
    }) 
    .controller('JobsCtrl', ['$scope', 'tabsService', function ($scope, tabsService) { 
    $scope.tabs = tabsService.tabs(); 
    $scope.tabsService = tabsService; 

    tabsService.activeTab = $scope.tabs[0].id; 

    }]) 
    .controller('InvoicesCtrl', ['$scope', 'tabsService', function ($scope, tabsService) { 
    $scope.tabs = tabsService.tabs(); 
    $scope.tabsService = tabsService; 

    tabsService.activeTab = $scope.tabs[1].id; 

    }]) 
    .controller('PaymentsCtrl', ['$scope', 'tabsService', function ($scope, tabsService) { 
    $scope.tabs = tabsService.tabs(); 
    $scope.tabsService = tabsService; 

    tabsService.activeTab = $scope.tabs[2].id; 
    }]);

jobs.partial.html

<ul class="nav nav-tabs"> 
    <li ng-class="{active: tabsService.isActiveTab(tab.id)}" ng-repeat="tab in tabs"> 
    <a href="#/{{tab.id}}">{{tab.label}} </a> 
    </li> 
</ul> 
<div class="tab-content"> 
    <div class="tab-pane fade in active"> 
    Jobs 
    </div> 
</div>

invoices-partial.html

<ul class="nav nav-tabs"> 
    <li ng-class="{active: tabsService.isActiveTab(tab.id)}" ng-repeat="tab in tabs"> 
    <a href="#/{{tab.id}}">{{tab.label}} </a> 
    </li> 
</ul> 
<div class="tab-content"> 
    <div class="tab-pane fade in active"> 
    Invoices 
    </div> 
</div>

payments-partial.html

<ul class="nav nav-tabs"> 
    <li ng-class="{active: tabsService.isActiveTab(tab.id)}" ng-repeat="tab in tabs"> 
    <a href="#/{{tab.id}}">{{tab.label}} </a> 
    </li> 
</ul> 
<div class="tab-content"> 
    <div class="tab-pane fade in active"> 
    Payments 
    </div> 
</div>

來源

2016-01-18 23:11:30

Thanks.I同意，如果您使用＃/作業，它會重定向到一個新的視圖，但它應該有選項卡和視圖刷新基於我們點擊哪個標籤，但在我的代碼它採取的#jobs的HTML，但頁面中缺少mutitab。 – Senthil

請提供解決方案，執行ngRoute ng-view – Senthil

@Senthil，使用'ngRoute'實現 –

AngularJS $ routeprovider路由在Mutitab

回答

相關問題