從模板添加動態內容在MD-標籤角材料

var app=angular.module('app',['ngRoute','ng-breadcrumbs','ngMaterial','ngAnimate','ngAria','ControllerModule']).config(['$routeProvider',function($routeProvider) 
 
{ 
 
\t 
 
\t $routeProvider.when('/',{ 
 
\t \t 
 
\t \t templateUrl:'view/login/login.html', 
 
\t \t controller:'loginController', \t 
 
\t }).when('/dashboard/',{ 
 
\t \t 
 
\t \t templateUrl:'view/dashboard/dashboardBodyTab1.html', 
 
\t \t controller:'dashboardController', 
 
\t \t activetab:'tab1', 
 
\t \t label:'Integration of Behavioral Health and Primary Care' 
 
\t }). 
 
\t when('/dashboard/tab2/',{ 
 
\t \t templateUrl:'view/dashboard/dashboardBodyTab2.html', 
 
\t \t controller:'dashboardController', 
 
\t \t activetab:'tab2', 
 
\t \t label:'Ambulatory Care Redesign:Primary Care' 
 
\t }). 
 
\t when('/dashboard/tab3/',{ 
 
\t \t templateUrl:'view/dashboard/dashboardBodyTab3.html', 
 
\t \t controller:'dashboardController', 
 
\t \t activetab:'tab3', 
 
\t \t label:'Ambulatory Care Redesign:Specialty Care' 
 
\t }). 
 
\t when('/dashboard/tab4/',{ 
 
\t \t templateUrl:'view/dashboard/dashboardBodyTab4.html', 
 
\t \t controller:'dashboardController', 
 
\t \t activetab:'tab4', 
 
\t \t label:'Patient Safety in the Ambulatory Setting' 
 
\t }). 
 
\t when('/dashboard/tab5/',{ 
 
\t \t templateUrl:'view/dashboard/dashboardBodyTab5.html', 
 
\t \t controller:'dashboardController', 
 
\t \t activetab:'tab5', 
 
\t \t label:'Million Hearts Initiative' 
 
\t }). 
 
\t otherwise({ 
 
     redirectTo: '/' 
 
     }); 
 
                                 }]);

<script src="https://raw.githubusercontent.com/angular/bower-angular-route/master/angular-route.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
 
<md-toolbar class="md-medium-tall"> 
 
\t \t  <md-tabs md-stretch-tabs> 
 
\t \t  \t <md-tab label="Integration of Behavioral Health and Primary Care" ><span class="vDivider"></md-tab> 
 
\t \t  \t <md-tab label="Ambulatory Care Redesign: Primary Care"></md-tab> 
 
\t \t  \t <md-tab label="Ambulatory Care Redesign: Specialty Care"></md-tab> 
 
\t \t  \t <md-tab label="Patient Safety in the Ambulatory Setting"></md-tab> 
 
\t \t  \t <md-tab label="Million Hearts Initiative"><span class="vDivider"></md-tab> 
 
\t \t  \t 
 
\t \t  </md-tabs> 
 
\t \t  </md-toolbar> 
 
\t \t  </div>

我想將內容添加到<md-tab>動態。以上是我的HTML頁面和app.js文件的路由。我想通過使用ngRoute來更改內容。

我有我的HTML頁5個選項卡，如果我選擇TAB1然後url sholud被設置爲/dashboard/使ngRoute將設置爲TAB1的templateUrl爲view/dashboard/dashboardBodyTab1.html和controller爲dashboardController。相同的將應用於tab2，tab3，tab4 & tab5。任何幫助將不勝感激。

在此先感謝。

來源

2016-05-30 suman pichhode

這是MD-標籤是一個指令？ –

是@JackyCoogan –

你需要在你的HTML添加ng-view以便按照路線更改路線的內容在你的HTML反映。

<div ng-app = "mainApp"> 
    ... 
    <div ng-view></div> 

</div>

Example

來源

2016-05-30 10:57:46 Satyaki

感謝您的回答Satyanki。你能告訴我應該在哪裏放置ng-view到我的HTML頁面，以便它的內容會根據標籤改變嗎？ –

在之後放

。如果這有助於您，請將我的答案標記爲已接受。謝謝！ – Satyaki

從模板添加動態內容在MD-標籤角材料

回答

相關問題