i have this plunkr have system add tabs dynamically.
when add new tab, setted active tab. problem becomes when add 2 tabs, clicks on first tab , add new tab. order, new inserted tab not setted active.
any ideas please?
this html code:
<div ng-controller="tabsdemoctrl"> {{activetabindex}} <uib-tabset active="activetabindex"> <uib-tab ng-repeat="tab in tabs" index="tab.id"> <uib-tab-heading>{{ tab.title }} <a ng-click="removetab(tab.id)" href=''>(del)</a> </uib-tab-heading> {{tab.content}} </uib-tab> </uib-tabset> <div ng-controller="btnctrl"> <div class="btn btn-primary" ng-click="addtab()">add</div> </div> </div>
and controller:
angular.module('ui.bootstrap.demo', ['nganimate', 'ngsanitize', 'ui.bootstrap']); angular.module('ui.bootstrap.demo').controller('tabsdemoctrl', function ($rootscope, $scope) { $rootscope.activetabindex = 0; $rootscope.tabs = []; //close tab $scope.removetab = function(index) { var tabslength = $scope.tabs.length -1; (var i=0; < $scope.tabs.length; i++) { if ($scope.tabs[i].id == index) { $scope.activetabindex = $scope.tabs[tabslength].id; $scope.tabs.splice(i, 1); } } }; }) angular.module('ui.bootstrap.demo').controller('btnctrl', function ($timeout, $scope, $rootscope) { //add new tabs $scope.addtab = function() { var newtab = { title: 'new tab', content: 'content here', id: makeid() }; $rootscope.tabs.push(newtab); $timeout(function() { $rootscope.activetabindex = newtab.id; }); } function makeid() { var text = ""; var possible = "abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz0123456789"; for( var i=0; < 5; i++ ) text += possible.charat(math.floor(math.random() * possible.length)); return text; } });
here working plunker: https://plnkr.co/edit/pucttzsznmvazjy13ioq?p=preview
i think issue referencing activetabindex
in template without $root
proceeding this:
active="$root.activetabindex"
what equates too, outside of template $scope.$root.activetabindex
convenience method $rootscope
inside template. though $rootscope
above other scopes, when access variable in template that's in isolate scope it's assumed property of $scope
. uib-tab
creating isolate scope makes $rootscope
unavailable directive.
Comments
Post a Comment