Question

我一直在使用包含multitab视图的角度MVC应用程序。我有一个带有一些templateURL标签的tabset

我为此所做的就像

＆＃13;

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

＆＃13;

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

＆＃13;

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

请建议我如何实现同样的目标。

提前致谢。

Answer 1

首次检索模板时会自动执行缓存。

如果您想要预先设置它们，则应将$http请求的缓存设置为bo $templateCache：

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

这是一个有效的例子：

＆＃13;

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

＆＃13;

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

＆＃13;

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>

找到这个小提琴：https://jsfiddle.net/pawanFiddle/mwqty2sf/5/

由于

Angular Tabs在＆＃34; ng-include src＆＃34;中提供带缓存的模板。

2 个答案: