Select static tab programmatically using Angular UI bootstrap directives

[Sanja Rogers]

In the tabs examples here http://angular-ui.github.com/bootstrap/ they show how to select "dynamic" tabs via ng-click.  

I would like to do this but with a static tab:

http://plnkr.co/edit/6CHypa

However when the panes are not declared in the scope (as with dynamic) they are in a child scope.  I have searched a bit and it seems like accessing child scope is not ok.  I wouldn't think I have to hack the plug in just to be able to select a tab - any ideas??

[Clint Checketts]

You can set the variable references by 'active' attribute to true: http://plnkr.co/edit/oeDoZ6?p=preview

Note the dot in the variable, since the values are in different scopes, you want to make sure you are referring to the same reference.

<pane heading="Static title" active="data.static">Static content</pane>

<button class="btn" ng-click="data.static = true">Select Static tab {{data.static}}</button>

--
You received this message because you are subscribed to the Google Groups "AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email to angular+u...@googlegroups.com.
To post to this group, send email to ang...@googlegroups.com.
Visit this group at http://groups.google.com/group/angular?hl=en-US.
For more options, visit https://groups.google.com/groups/opt_out.
 
 

[Sanja Rogers]

Thanks Clint!  

I thought the directive was setting this attribute automatically.  This seems like an attribute which can be set or it can be default.  

I can see now this is where the directive looks to see if the "active" attribute has been set:

      if (attrs.active) {

        getSelected = $parse(attrs.active);

        setSelected = getSelected.assign;

        scope.$watch(

          function watchSelected() {return getSelected(scope.$parent);},

          function updateSelected(value) {scope.selected = value;}

        );

        scope.selected = getSelected ? getSelected(scope.$parent) : false;

      }

  Don't quite understand all the code here but the directive is a bit more clear in general

[Clint Checketts]

The rest of the code is to ensure that a tab get unselected if another tab get selected, since you wouldn't want to ahve to manually hunt out the current active one and set its 'active' state to false.