[英]Loading Partial html file in AngularJS
我有一个周一至周日的选项卡集,当我单击任何一个选项卡时,我想加载一个不同的部分文件。 我如何在AngularJS中做到这一点
<div ng-controller='CleaningServicesCtrl' ng-init= 'getlocations()'>
<div class="container">
<div class="btn-group" dropdown>
<button type="button" class="btn ">Select Your Location</button>
<button type="button" class="btn dropdown-toggle" dropdown-toggle>
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li ng-repeat="perlocation in locations"><a ng-click='loadCalendar(perlocation)'>{{perlocation.name}}</a></li>
</ul>
</div>
<div>
<tabset justified="true">
<tab heading="Sunday"></tab>
<tab heading="Monday">Monday</tab>
<tab heading="Tuesday">Tuesday</tab>
<tab heading="Wednesday">Wednesday</tab>
<tab heading="Thursday">Thursday</tab>
<tab heading="Friday">Friday</tab>
<tab heading="Saturday">Saturday</tab>
</tabset>
</div>
</div>
</div>
我的部分文件sundayPartial.html
<div>
<h3>Sunday Here</h3>
</div>
因此,基本上,当我单击“星期日”选项卡时,它应该加载“星期日”选项卡下的sundayPartial.html
我的app.js
angular
.module('letsSchedulecommyApp', [
'ngCookies',
'ngResource',
'ngRoute',
'ui.bootstrap',
'ui.calendar',
'ngSanitize'
])
.config(function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'views/cleaning_services/homepage.html',
controller: 'CleaningServicesCtrl'
})
});
任何帮助表示赞赏。 谢谢
你有没有尝试过:
<div ng-include src="'sundayPartial.html'"></div>
?
听起来您只需要一些基本的路由即可。 您可以使用内置的角度路由或更高级的功能,例如ui-router
我建议整天写一条路线
码
$scope.days = ["Monday","Tuesday","Wednesday","Thursday","Friday","Saturday","Sundays"];
标记
<tabset justified="true">
<tab ng-repeat="day in days" heading="{{day}}">{{day}}</tab>
</tabset>
<div ng-view></div>
路线
.config(function($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'views/cleaning_services/homepage.html',
controller: 'CleaningServicesCtrl'
})
.when('/:day', {
templateUrl: 'views/cleaning_services/day.html',
controller: 'dayCtrl'
})
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.