One of the great things about AngularJS is the way you can easily reuse and embed templates and controllers. Recently I was asked to create two versions of a control panel – one where there were several individual pages, and another where we had the pages as tabs. As I was already using the excellent AngularJS Bootstrap plugin I thought about doing something like:
<tabset> <tab ...> <div ng-include=... /> </tab ...> ... <tabset>
However the issue with this is that you load all the templates (and controllers) at page-load so if I update data in one tab it will still show the old data (from page-load time) when I change to another tab.
After scratching my head for a while I came up with the following simple method:
<div ng-controller="Tabs"> <ul class="nav nav-tabs noprint"> <li role="presentation"><a href="#/"> <span class="glyphicon glyphicon-circle-arrow-left"></span> Dön </a></li> <li role="presentation" ng-class="{ active: type == 'recipe' }"><a href="#/edit/recipe/{{ rec_id }}"> <span class="glyphicon glyphicon-edit"></span> Tarife </a></li> ... </ul> <div ng-include="'templates/' + template + '.html'"></div> </div>
Then create a simple controller:
t.controller('Tabs', function($scope, $routeParams) { $scope.rec_id = $routeParams.rec_id; $scope.template = $routeParams.template; });
And set up the routing (individual pages have their own routes¶ms already set up):
// For new combined tabs path: '/edit/:template/:rec_id?'
Job done!