Angular Bootstrap UI：选项卡标题中的输入字段答案

【问题标题】：Angular Bootstrap UI: Input Fields in Tab-HeadingAngular Bootstrap UI：选项卡标题中的输入字段
【发布时间】：2015-12-15 16:00:02
【问题描述】：

我再次遇到了 Angular Bootstrap UI 选项卡的问题。我的问题的简短描述：我希望用户创建具有不同标题的不同页面。创建页面后，我创建一个带有页面标题的新选项卡，用户可以添加内容。到目前为止效果很好。现在，在 uib-tab-heading 中，我可以选择编辑页面标题

<uib-tab-heading>
    <div class="pull-left">
        <span data-ng-if="!editable[$index]">{{title}}</span>
        <input data-ng-if="editable[$index]" data-ng-model="titles[$index]">
    </div>
    <div class="pull-right">
        <button data-ng-if="!editable[$index]" data-ng-click="edit($index)"><span class="glyphicon glyphicon-wrench"></span></button>
        <button data-ng-if="editable[$index]" data-ng-click="save($index)"><span style="color:green;" class="glyphicon glyphicon-ok"></span></button>
    </div>
    <div style="clear:both;"></div>
</uib-tab-heading>

按钮操作设置一个变量，因此选项卡中的输入字段出现。到目前为止有效。但是在输入框我只能编辑一个字母，然后，输入后，输入框失去焦点，标签随意改变。

有没有一种通用的方法来禁用键盘与选项卡的交互，这样我就可以在不更改选项卡的情况下更改输入字段的值？

【问题讨论】：

标签： angularjs angular-ui-bootstrap angular-bootstrap

【解决方案1】：

一种选择是在输入元素被修改时强制将焦点返回到输入元素。

见小提琴：https://jsfiddle.net/masa671/2mq3106a/

标记：

<input data-ng-if="editable[$index]" ng-model="titles[$index]" focus-me>

JavaScript：

.directive('focusMe', function () {
    return {
        require: 'ngModel',
        link: function (scope, elem, attr, ngModel) {
            scope.$watch(function () {
                return ngModel.$modelValue;
            }, function() {
                elem[0].focus();
            });
        }
    };
});

【讨论】：

【解决方案2】：

感谢您的回答！

我稍微修改了你的小提琴以适应我的代码。

见小提琴：https://jsfiddle.net/2mq3106a/7/

<div ng-controller="MyCtrl">
  <uib-tabset>
      <uib-tab class="tabcontent-bordered" data-ng-repeat="pageTitle in titles">
          <uib-tab-heading>
              <div class="pull-left">
                  <span data-ng-if="!editable[$index]">{{pageTitle}}</span>
                  <input id="$index" data-ng-if="editable[$index]" ng-model="titles[$index]" focus-me>
              </div>
              <div class="pull-right">
                  <button data-ng-if="!editable[$index]" data-ng-click="edit($index)"><span class="glyphicon glyphicon-wrench"></span></button>
                  <button data-ng-if="editable[$index]" data-ng-click="save($index)"><span style="color:green;" class="glyphicon glyphicon-ok"></span></button>
              </div>
             <div style="clear:both;"></div>
          </uib-tab-heading>
          I am on Tab {{$index}}
      </uib-tab>
  </uib-tabset>
</div>

我并没有失去对输入字段的关注，到目前为止，这是有效的，但还有一个问题。正如您在小提琴中看到的那样，如果我更改输入字段的输入值，另一个选项卡将变为活动状态，因此显示另一个选项卡的内容。

【讨论】：