Why does dynamically creating togglable tabs cause duplicate ngSwitchWhen divs in AngularJS? -
i'm using bootstrap , angularjs dynamically create clickable tabs in html. more specifically, i'm using ng-switch , ng-switch-when directives command tab's content displayed @ given time.
please note: below you'll notice utilize controller dom manipulation. realize "angularjs way" perform dom manipulation directives (and not controllers). i'm not 1 deliberately violate coding practices, since i'm trying understand exact issue i've stumbled across while learning controllers , directives, i'm asking consider using controller since that's believe may contributing issue.
if maintain reading you'll notice i've found directive-based solution (i.e., "angularjs way"), i'm asking issue occurs when using controller , ng-switch-when.
the issue i'm facing follows. when append div tags (containing ng-switch-when directive) onto container, , compile these tags using $compile, somehow content of each tag using ng-switch-when becomes duplicated. maintain question becoming long, i've placed thought behind code's expected behavior in comments of first jsfiddle below, demonstrates issue.
jsfiddle: have now -- uses controller dom manipulation ("non-angularjs way"), results in unexpected duplication of tags using ng-switch-when.
an in-depth description of how reproduce duplication follows. upon creating new tab, appears clicked tab's content (within div containing ng-switch-when) duplicated. can see happen loading above jsfiddle, right-clicking default text, selecting inspect element, , pressing analysis > create tab in tabbed pane. you'll see there 2 div tags ng-switch-when="default" instead of one. if go on create new tabs, pattern continues view1, view2, , on. alternatively, click analysis > create tab 5 times , @ duplicates in tabs 1-4. either way, you'll see selected tab's contents doubled whenever new tab created.
frustrated unexpected behavior, went ahead , implemented directive-based solution using angularui's bootstrap components, creates custom directives tab components, gain desired functionality.
jsfiddle: want happen in above jsfiddle -- uses directives dom manipulation ("angularjs way").
however, i've mentioned, want know why first jsfiddle not working. see below formal question.
points consider: the issue may related scope, order scripts loaded, or perchance logic error. perhaps it's angularjs cannot do. i'm aware compound transclusion no longer works of v1.2, , issue may related. so question follows:why duplication occurring? there way prevent/workaround duplicates beingness created? remember, wouldn't utilize in practice, i'm curious if issue can solved @ all.
please note: not looking resolve using jquery, such this jquery solution. although i'm aware angularjs uses lighter version of jquery called jqlite under hood, i'm looking "pure angularjs" solution.
html:
<!-- include cdns (see jsfiddle above) --> <!-- wrap in html tags, include doctype --> <body ng-app="myapp"> <div class="panel panel-default" ng-controller="myctrl"> <div class="panel-heading"> <ul class="nav nav-tabs"> <li class="active"> <a class="h4">my app</a> </li> <li class="dropdown"> <a href="" class="dropdown-toggle h4" data-toggle="dropdown"> analysis <span class="caret"></span> </a> <ul class="dropdown-menu"> <li> <button id="createtablink" class="h4" ng-click="createtabclick()">create tab</button> </li> </ul> </li> </ul> </div> <div class="panel-body"> <div class="panel panel-default"> <div class="panel-heading"> <ul id="createtabdiv" class="nav nav-tabs"></ul> </div> <div class="panel-body"> <div id="viewwrapper" ng-switch="" on="viewselected"> <div id="default" ng-switch-when="default">default</div> </div> </div> </div> </div> </div> </body> js:
angular.module('myapp', []); function myctrl($scope, $compile) { $scope.count = 0; $scope.viewselected = "default"; $scope.tabclick = function($event) { var tab = $event.target; var viewname = tab.getattribute("value"); $scope.viewselected = viewname; }; $scope.createtabclick = function() { $scope.count++; var viewname = "view" + $scope.count; var createtabdiv = angular.element(document.queryselector('#createtabdiv')); var viewwrapper = angular.element(document.queryselector('#viewwrapper')); var $comp1 = createtabdiv.append('<li class="active"><a class="h4" value="' + viewname + '" ng-click="tabclick($event)">tab ' + $scope.count + '</a></li>'); $compile($comp1)($scope); var $comp2 = viewwrapper.append('<div id="' + viewname + '" ng-switch-when="' + viewname + '">' + viewname + '</div>'); $compile($comp2)($scope); $scope.viewselected = viewname; }; } angularjs tabs twitter-bootstrap-3 dynamically-generated
No comments:
Post a Comment