在AngularJS中加載部分html文件

Question

我有一個周一至周日的選項卡集，當我單擊任何一個選項卡時，我想加載一個不同的部分文件。 我如何在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'
      })
});

任何幫助表示贊賞。 謝謝

Answer 1

你有沒有嘗試過：

<div ng-include src="'sundayPartial.html'"></div>

？

Answer 2

聽起來您只需要一些基本的路由即可。 您可以使用內置的角度路由或更高級的功能，例如ui-router

Answer 3

我建議整天寫一條路線

碼

$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'
    })
});