Question

我再次遇到Angular Bootstrap UI标签的问题。我的问题的简短描述：我希望用户创建具有不同标题的不同页面。创建页面后，我创建了一个带有pagetitle的新选项卡，用户可以添加内容。到目前为止工作正常。现在，在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>

按钮操作设置变量，以便显示选项卡中的输入字段。这到目前为止工作。但是在输入字段中我只能编辑一个字母，然后在输入后输入字段失去焦点并且标签会以随机方式更改。

是否有一种常用方法可以禁用与标签的键盘交互，这样我就可以更改输入字段的值而无需更改标签？

Answer 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();
            });
        }
    };
});

Answer 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>

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

Angular Bootstrap UI：Tab-Heading中的输入字段

2 个答案: