I am using the MEAN.js template, you can find all the code here.
I tried to add two new tabs to the page created after one of the articles was selected from the list. For this task, I decided to use both UI-Router and UI-Bootstrap for Angular.js. 2 tabs do not work properly, I can switch between them and correctly see their contents, but sometimes, when I return and select the menu item of the article list, I get a blank page with two tabs and nothing more.
The following are changes to the view-article.client.view.html file with two new tabs (the previous content was copied to 2 files containing partial ones for new tabs):
<div ng-controller="ArticlesController"> <tabset> <tab ng-repeat="t in tabs" heading="{{t.heading}}" select="go(t.route)" active="t.active"> </tab> </tabset> <div ui-view></div> </div>
I entered these few lines of code into the article controller:
$scope.tabs = [ { heading: 'SubA', route:'viewArticle.SubA', active:false }, { heading: 'SubB', route:'viewArticle.SubB', active:false } ]; $scope.go = function(route){ $state.go(route); }; $scope.active = function(route){ return $state.is(route); }; $scope.$on('$stateChangeSuccess', function() { $scope.tabs.forEach(function(tab) { tab.active = $scope.active(tab.route); }); });
Here route.js
'use strict' angular.module('articles').config(['$stateProvider', function($stateProvider) { $stateProvider. state('listArticles', { url: '/articles', templateUrl: 'modules/articles/views/list-articles.client.view.html' }). state('createArticle', { url: '/articles/create', templateUrl: 'modules/articles/views/create-article.client.view.html' }). state('viewArticle', { url: '/articles/:articleId', templateUrl: 'modules/articles/views/view-article.client.view.html' }). state('editArticle', { url: '/articles/:articleId/edit', templateUrl: 'modules/articles/views/edit-article.client.view.html' }). state('viewArticle.SubA', { url: '/SubA', templateUrl: 'modules/articles/views/view-article.client.view.SubA.html' }). state('viewArticle.SubB', { url: '/SubB', templateUrl: 'modules/articles/views/view-article.client.view.SubB.html' }); } ]);