Angular - keep tabs created when updating the page

Asked

Viewed 154 times

0

angularjs

1 answer

0

You need to preserve the collection $scope.tabs.

In the following example you can notice that the collection receives a new member each click on the button Add Tab.

I changed the code of your example to allow values to be saved in localStorage between sessions.

console.clear();

var app = angular.module('ui.bootstrap.demo', ['ngAnimate', 'ui.bootstrap']);

app.directive('compileHtml', ['$sce', '$parse', '$compile',
  function($sce, $parse, $compile) {
    return {
      restrict: 'A',
      compile: function ngBindHtmlCompile(tElement, tAttrs) {
        var ngBindHtmlGetter = $parse(tAttrs.compileHtml);
        var ngBindHtmlWatch = $parse(tAttrs.compileHtml, function getStringValue(value) {
          return (value || '').toString();
        });
        $compile.$$addBindingClass(tElement);

        return function ngBindHtmlLink(scope, element, attr) {
          $compile.$$addBindingInfo(element, attr.compileHtml);

          scope.$watch(ngBindHtmlWatch, function ngBindHtmlWatchAction() {

            element.html($sce.trustAsHtml(ngBindHtmlGetter(scope)) || '');
            $compile(element.contents())(scope);
          });
        };
      }
    };
  }
]);

app.controller('TabsDemoCtrl', function($compile, $sce, $scope, $window) {

var retrievedObject = JSON.parse(localStorage.getItem('testObject'));  // Obtém do localstorage

  $scope.tabs = retrievedObject || [{"title":"Tab 01","content":"Dynamic content 1","active":true},{"title":"Tab 02","content":"<div><h1>New Tab 02 {{foo}}</h1><div ng-include=\"tab.tabUrl\"></div></div>","tabUrl":"includeFile.html","active":false}];

  $scope.removeTab = function(i) {
    console.log("Removing tab: " + i);
    $scope.tabs.splice(i, 1);
    localStorage.setItem('testObject', JSON.stringify($scope.tabs)); // Armazena no localstorage
  };

  $scope.foo = 'FOO';
  $scope.bar = 'BAR';

  $scope.addTab = function() {
    var len = $scope.tabs.length + 1;
    var numLbl = '' + ((len > 9) ? '' : '0') + String(len);

    var mrkUp = '<div>' +
      '<h1>New Tab ' + numLbl + ' {{foo}}</h1>' +
      '<div ng-include="tab.tabUrl"></div>' +
      '</div>';

    $scope.tabs.push({
      title: 'Tab ' + numLbl,
      content: mrkUp,
      tabUrl: 'includeFile.html'
    });
    
    localStorage.setItem('testObject', JSON.stringify($scope.tabs));  // Armazena no localstorage
  };
});

app.controller('IncludeFileCtrl', function($scope) {

  console.log('IncludeFileCtrl');

  $scope.title = "Include File Title";
});
<!doctype html>
<html ng-app="ui.bootstrap.demo">
  <head>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-animate.js"></script>
    <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.14.3.js"></script>
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="example.js"></script>
  </head>
<body ng-controller="TabsDemoCtrl" style="padding: 20px;">
<button class="btn btn-default" ng-click="addTab()">Add Tab</button>
<div id="mainCntr" style="padding: 20px;">
  <uib-tabset>
    <uib-tab ng-repeat="tab in tabs" active="tab.active" disable="tab.disabled">
      <uib-tab-heading>
        {{tab.title}} <i class="glyphicon glyphicon-remove-sign" ng-click="removeTab($index)"></i>
      </uib-tab-heading>
      <!-- {{tab.content}} -->
      <div compile-html="tab.content"></div>
      {{tab.tabUrl}}
    </uib-tab>
  </uib-tabset>
  
  {{tabs}}
</div>
</body>
</html>

  • The following error occurs when re-loading the page: Error: [ngRepeat:dupes] Duplicates in a Repeater are not allowed. Use 'track by' Expression to specify Unique Keys. Repeater: tab in tabs, Duplicate key: Object:5, Duplicate value: {"title":"Tab 05","content":"<div><H1>New Tab 05 {{foo}}</H1><div ng-include="tab.tabUrl"></div></div>","tabUrl":"includeFile.html"}

Browser other questions tagged angularjs

You are not signed in. Login or sign up in order to post.