从模板添加动态内容在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-标签角材料

回答

相关问题