在md-tab角度材质中添加模板中的动态内容

Question

var app=angular.module('app',['ngRoute','ng-breadcrumbs','ngMaterial','ngAnimate','ngAria','ControllerModule']).config(['$routeProvider',function($routeProvider)
{
	
	$routeProvider.when('/',{
		
		templateUrl:'view/login/login.html',
		controller:'loginController', 	
	}).when('/dashboard/',{
		
		templateUrl:'view/dashboard/dashboardBodyTab1.html',
		controller:'dashboardController',
		activetab:'tab1',
		label:'Integration of Behavioral Health and Primary Care'
	}).
	when('/dashboard/tab2/',{
		templateUrl:'view/dashboard/dashboardBodyTab2.html',
		controller:'dashboardController',
		activetab:'tab2',
		label:'Ambulatory Care Redesign:Primary Care'
	}).
	when('/dashboard/tab3/',{
		templateUrl:'view/dashboard/dashboardBodyTab3.html',
		controller:'dashboardController',
		activetab:'tab3',
		label:'Ambulatory Care Redesign:Specialty Care'
	}).
	when('/dashboard/tab4/',{
		templateUrl:'view/dashboard/dashboardBodyTab4.html',
		controller:'dashboardController',
		activetab:'tab4',
		label:'Patient Safety in the Ambulatory Setting'
	}).
	when('/dashboard/tab5/',{
		templateUrl:'view/dashboard/dashboardBodyTab5.html',
		controller:'dashboardController',
		activetab:'tab5',
		label:'Million Hearts Initiative'
	}).
	 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">
		      <md-tabs md-stretch-tabs>
		      	<md-tab label="Integration of Behavioral Health and Primary Care" ><span class="vDivider"></md-tab>
		      	<md-tab label="Ambulatory Care Redesign: Primary Care"></md-tab>
		      	<md-tab label="Ambulatory Care Redesign: Specialty Care"></md-tab>
		      	<md-tab label="Patient Safety in the Ambulatory Setting"></md-tab>
		      	<md-tab label="Million Hearts Initiative"><span class="vDivider"></md-tab>
		      	
		      </md-tabs>
		      </md-toolbar>
		    </div>

我想动态地向<md-tab>添加内容。以上是我的HTML页面和app.js文件，用于路由。我想使用ngRoute更改内容。

我的HTML页面中有5个标签，如果我选择tab1，则url sholud设置为/dashboard/，以便ngRoute设置templateUrl tab1为view/dashboard/dashboardBodyTab1.html，controller为dashboardController。同样适用于tab2，tab3，tab4＆amp; tab5。任何帮助将不胜感激。

提前致谢。

Answer 1

您需要在HTML中添加ng-view，以便根据路线更改路线内容在HTML中的反映。

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

</div>  

Example