Angular 选项卡在 "ng-include src" 中使用缓存呈现模板

Question

我一直在 angular 包含多选项卡视图的 MVC 应用程序中工作。我有一个带有一些模板 URL 标签

的标签集

我为此所做的就像

$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>

我必须缓存模板以便快速检索。在 $templateCache 中使用 ng-include 和模板 URL（来自 Spring Dispatcher Servlet）对我不起作用。

请建议我怎样才能达到同样的效果。

提前致谢。

Answer 1

缓存会在您第一次检索模板时自动完成。

如果你想预先缓存它们，你应该将 $http 请求的缓存设置为 bo $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>

Answer 2

我为每个选项卡添加了单独的 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>

找到这个 fiddle : https://jsfiddle.net/pawanFiddle/mwqty2sf/5/

谢谢

Angular 选项卡在 "ng-include src" 中使用缓存呈现模板

Angular Tabs render templates with caching in "ng-include src"

browser-cache

angularjs

angular-ui-tabset