0

I have been working in angular MVC application containing multitab views. I have a tabset with some templateURL tabs

What I have done for this is like

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

I have to cache the templates for fast retrieval. Using ng-include and template URL (that is coming from Spring Dispatcher Servlet) in it with $templateCache not working for me.

Please suggest how can I achieve the same.

Thanks in advance.

4

2 回答 2

0

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

如果你想预先缓存它们，你应该将$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>

于 2015-10-06T15:11:43.157 回答
0

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

谢谢

于 2015-10-07T06:50:37.257 回答