2

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.

roxid
  • 493
  • 4
  • 14
user1686758
  • 759
  • 2
  • 7
  • 14

2 Answers2

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

Guilherme
  • 1,980
  • 22
  • 23
  • 1
    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"? – Abdel Raoof Olakara Apr 15 '15 at 19:25
  • lol, I know, is little be confused, I'll explain better.. and offer the recommended way for this. – Guilherme Apr 15 '15 at 19:28
  • Thank you for the help. I do get what it mean but may be missing the actual theory. If possble, hint me. – user1686758 Apr 15 '15 at 19:28
  • _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 – user1686758 Apr 15 '15 at 19:44
  • @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. – Guilherme Apr 15 '15 at 19:53
  • @AbdelRaoof, there is [a big question on SO](http://stackoverflow.com/questions/11605917/this-vs-scope-in-angularjs-controllers) that show the main different between the `this` and the `$scope`, because is not so easy. The idea here, is that the `this` can access all child scopes (like the defined in the tabset directive), but $scope don't. – Guilherme Apr 15 '15 at 20:51
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.

batmaniac7
  • 422
  • 5
  • 17