Angular Bootstrap tabs not getting input field

Question

Facing a weird issue, where a simple text field value is not getting printed when using tabset. Wrote a sample to demo the same. Please check it below link

sample link

<tabset>
    <tab heading="Static title">Testing input
    <input ng-model="nameStr" value="">
    <button class="btn btn-default btn-lg " type="button" ng-click="callMe()" >Test callme</button>
    </tab>
    <tab ng-repeat="tab in tabs" heading="{{tab.title}}" active="tab.active" disabled="tab.disabled">
      {{tab.content}}
    </tab>
    <tab select="alertMe()">
      <tab-heading>
        <i class="glyphicon glyphicon-bell"></i> Alert!
      </tab-heading>
      I've got an HTML heading, and a select callback. Pretty cool!
    </tab>
  </tabset>

Do suggest, what would have been missed out.

Thanks in advance.

what exactly is the problem?

tpie
– tpie

2015-04-15 19:17:36 +00:00
Commented Apr 15, 2015 at 19:17 — tpie
– tpie, Commented Apr 15, 2015 at 19:17

Guilherme · Accepted Answer · 2015-04-15 19:49:28Z

3

There is some questions about angular-ui way of encapsulate controllers inside it's directives (the idea is to have different controllers for different tasks). The problem, to access your "original" controller (and not the ones in the ui-bootstrap directive) you have to use the $parent in your view. Because the current $scope inside tabset is pointing to another controller.

So, it will become

<input ng-model="$parent.nameStr" value="">

I couldn't find the right explanation in the angular-ui repo, but this seems to get some ideas.

https://github.com/angular-ui/bootstrap/issues/2971

Older Answer

You can replace the $scope.nameStr inside the $scope.callMe for this.nameStr.

http://plnkr.co/edit/cUUQ9FQ0oEOmIltQTS2f?p=preview

edited Apr 15, 2015 at 19:49

answered Apr 15, 2015 at 19:21

Guilherme

1,99022 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Abdel Raoof Olakara Over a year ago

But can you explain the behavior? the nameStr is not in the scope if you try to dump $scope to console.. it is also not available on parent.. but how "this"?

Guilherme Over a year ago

lol, I know, is little be confused, I'll explain better.. and offer the recommended way for this.

user1686758 Over a year ago

Thank you for the help. I do get what it mean but may be missing the actual theory. If possble, hint me.

user1686758 Over a year ago

this solved part of the issue for me, now I have a $scope variable in Controller gets updated in service call and I can't access that value. Any idea on how to solve that

Guilherme Over a year ago

@user1686758 I updated the answer, try using the new approach, because the this is the first way that I used to do this. Take carefully with the this, because inside anonymous functions it will have another scope.

|

batmaniac7 · Accepted Answer · 2015-04-15 19:37:18Z

1

My solution:

$scope.name = {};
$scope.callMe = function(){
  alert('title ->'+$scope.name.str);
}

In html:

<input ng-model="name.str" value="">

Angular works much better this way. Using dot properties.

answered Apr 15, 2015 at 19:37

batmaniac7

4225 silver badges17 bronze badges

Collectives™ on Stack Overflow

Angular Bootstrap tabs not getting input field

2 Answers 2

6 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related