AngularJS Bootstrap HTML in Tabs

Question

I'm new to AngularJS and am trying to build a simple site with three tabs. I like the Bootstrap Tabs interface so I'm building off of that:

example.js

angular.module('base', ['ngAnimate', 'ngSanitize', 'ui.bootstrap']);
angular.module('base').controller('UiCtrl', function ($scope, $window) {
  content1 = "Bunch of Figs";
  array2 = ["Newton 1", "Newton 2"];
  content2 = array2.join('<br><br>');
  content3 = "Bunch of Widgets";
  $scope.tabs = [
    { title:'Figs', content:content1 },
    { title:'Newtons', content:content2 }, //, disabled: true },
    { title:'Widgets', content:content3, select:'alertMe()' }
  ];

  $scope.alertMe = function() {
    setTimeout(function() {
      $window.alert('You\'ve selected the widget tab!');
    });
  };

  $scope.model = {
    name: 'Tabs'
  };
});

index.html

<!doctype html>
<html ng-app="base">
  <head>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-animate.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-sanitize.js"></script>
    <script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.5.0.js"></script>
    <script src="example.js"></script>
    <link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
  </head>
  <body>

<style type="text/css">
  form.tab-form-demo .tab-pane {
    margin: 20px 20px;
  }
</style>

<div ng-controller="UiCtrl">
<p>

  <uib-tabset active="activeJustified" justified="true">
    <uib-tab index="$index + 1" ng-repeat="tab in tabs" heading="{{tab.title}}" disable="tab.disabled", select="tab.select">
      {{tab.content}}
    </uib-tab>
  </uib-tabset>

</div>
  </body>
</html>

I have two problems:

1) The HTML tags in the join are not treated as HTML in the tabs. 2) The select callback is not set to the dynamic tab.

How can I display HTML inside the tabs?

How can I attach select callbacks to dynamic tabs?

What is the generated HTML? Anyway you can post this in jsfiddle? — Rikin, Feb 12 '17 at 20:48

score 2 · Answer 1 · edited May 23 '17 at 12:25

1- You have to use ng-bind-html in your html, and $sce.trustAsHtml() in your controller

HTML:

<uib-tabset active="activeJustified" justified="true">
    <uib-tab index="$index + 1" ng-repeat="tab in tabs" heading="{{tab.title}}" disable="tab.disabled", select="tab.select()">
      <div ng-bind-html="tab.content"></div>
    </uib-tab>
</uib-tabset>

CONTROLLER:

angular.module('base').controller('UiCtrl', function ($scope, $window, $sce) {
   content1 = $sce.trustAsHtml("<h1>Html content<br/> example</h1>");
   $scope.tabs = [
      { title:'Figs', content:content1 },
      { title:'Widgets', content:content3, select: $scope.alertMe }
   ];

   ....

});

2- You aren't calling the function.

HTML: Change select="tab.select" to select="tab.select()".

CONTROLLER: Change select: 'alertMe()' to select: $scope.alertMe

Check this post about ng-bind-html

Check ui.boostrap docs about tabs

score 0 · Answer 2 · answered Feb 13 '17 at 02:32

1. How can I display HTML inside the tabs?

=> You can use ng-bind-html and $sce.trustAsHtml()

HTML

<uib-tab index="$index + 1" ng-repeat="tab in tabs" heading="{{tab.title}}" disable="tab.disabled", select="tab.select()">
    <span ng-bind-html="tab.content"></span>
</uib-tab>

JS

  $scope.tabs = [
    { title:'Figs', content: $sce.trustAsHtml(content1) },
    { title:'Newtons', content: $sce.trustAsHtml(content2) }, //, disabled: true },
    { title:'Widgets', content: $sce.trustAsHtml(content3), select: $scope.alertMe }
  ];

2. How can I attach select callbacks to dynamic tabs?

=> Change select="tab.select" to select="tab.select()" and { title:'Widgets', content:content3, select:'alertMe()' } to { title:'Widgets', content: $sce.trustAsHtml(content3), select: $scope.alertMe }

$scope.alertMe must be defined before $scope.tabs

==> You can refer to this demo: https://codeide.co/master/qVGVQyWG

Can you give an example to explain it? – Duc Huy Ta Feb 13 '17 at 03:02 — Duc Huy Ta, Feb 13 '17 at 03:02

score 0 · Answer 3 · answered Feb 13 '17 at 13:37

I choose to skip the tab component. Mostly because it did not have back button support. Further it became tricky to navigate to ex: the 3:rd tab from another page. So I used simple routing instead. ex: if there are 3 tabs I have 3 pages with specific routing. To avoid duplicating tab menu I created a component that i put in all three pages.

<ul ng-controller="tabsCtrl as tabs" class="nav nav-tabs">
  <li ng-class="{'active':tabs.generalTab.isActive}">
    <a ng-href="{{tabs.generalTab.path}}" translate>general.GENERAL</a>
  </li>
  <li ng-class="{'active':tabs.settingsTab.isActive}">
    <a ng-href="{{tabs.settingsTab.path}}" translate>settings.MENU_LABEL</a>
  </li>
  <li ng-class="{'active':tabs.extrasTab.isActive}">
    <a ng-href="{{tabs.extrasTab.path}}" translate>extras.MENU_LABEL</a>
  </li>
</ul>

AngularJS Bootstrap HTML in Tabs

3 Answers3