Angular Tabs在「ng-include src」中呈現緩存模板

Question

我一直在包含多視圖視圖的角度MVC應用程序中工作。 我有一些templateURL標籤

我已爲此做了標籤集就像

$scope.templateUrl = ''; 
 
var tabs = $scope.tabs = 
 
[]; 
 
var controller = this; 
 

 
this.selectTab = function(tab) 
 
{ 
 
    $templateCache.put(tab, tab.templateUrl); 
 
    angular.forEach(tabs, function(tab) 
 
    { 
 
    tab.selected = false; 
 
    }); 
 
    tab.selected = true; 
 
}; 
 

 
this.setTabTemplate = function(tab,templateUrl) 
 
{ 
 
    $scope.templateUrl = $templateCache.get(tab); 
 
} 
 

 
this.addTab = function(tab) 
 
{ 
 
    controller.selectTab(tab); 
 
    tabs.push(tab); 
 
};

<ng-include src="templateUrl"></ng-include>

我有緩存的快速檢索的模板。 使用ng-include和模板URL（來自Spring Dispatcher Servlet）與$ templateCache不兼容。

請建議我如何達到相同。

在此先感謝。

Answer 1

我已經爲每個選項卡添加了單獨的ng-include，它適用於我。

<tabset> 
     <tab ng-repeat="tab in tabsMenu" active="tab.active"> 
     <tab-heading> {{tab.title}} 
     <i ng-if =tab.closableTab class="glyphicon glyphicon-remove closeTabIcon" ng-click="removeTab($index)"></i> 
     </tab-heading> 
     <ng-include src="tab.url"></ng-include> 
     </tab> 

找到這個小提琴：https://jsfiddle.net/pawanFiddle/mwqty2sf/5/

感謝

Answer 2

緩存是在您第一次檢索模板時自動完成的。

如果你想預cahce他們，你應該設置一個$http請求緩存博$templateCache：

$http.get('Template1.html', { cache: $templateCache }); 

這是一個工作示例：

angular.module('myApp',[]).controller('myCtrl', function($scope, $http, $templateCache){ 
 
    $scope.templateUrl = ''; 
 
    $scope.tabs = []; 
 

 
    $scope.selectTab = function(tab) { 
 
    $scope.templateUrl = tab.templateUrl; 
 
    }; 
 

 
    $scope.addTab = function(tab) { 
 
    $http.get(tab.templateUrl, { cache: $templateCache }); 
 
    $scope.tabs.push(tab); 
 
    }; 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 

 
<div ng-app="myApp" ng-controller="myCtrl"> 
 
    <a href="#" ng-repeat="tab in tabs" ng-click="selectTab(tab)">{{tab.title}} </a> 
 
    <br/> 
 
    <ng-include src="templateUrl"></ng-include> 
 
    <br/> 
 
    <a href="#" ng-click="addTab({templateUrl: '/', title: 'new tab'})">Add a tab</a> 
 
</div>