Angular Bootstrap 选项卡未获取输入字段

Question

遇到一个奇怪的问题，使用 tabset 时没有打印简单的文本字段值。写了一个示例来演示相同的内容。请查看下方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>

建议一下，有什么会错过的。

提前致谢。

Answer 1

关于 angular-ui 在其指令中封装控制器的方式存在一些问题（想法是为不同的任务使用不同的控制器）。问题是，要访问您的 "original" 控制器（而不是 ui-bootstrap 指令中的控制器），您必须在视图中使用 $parent。因为 tabset 里面的当前 $scope 指向另一个控制器。

所以，会变成

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

我在 angular-ui 回购中找不到正确的解释，但这似乎得到了一些想法。

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

旧答案

您可以将 $scope.callMe 中的 $scope.nameStr 替换为 this.nameStr。

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

Answer 2

我的解决方案：

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

在html中：

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

Angular 这样效果更好。使用 dot 属性。

Angular Bootstrap 选项卡未获取输入字段

Angular Bootstrap tabs not getting input field

angularjs

angular-ui-bootstrap