Question

我正在创建一个指令，它将在输入字段的焦点上显示一组用于递增或递减输入值的按钮。在这种情况下，英制单位（1/8“，1/4”，1/2“）。

我遇到的第一个问题是当按下一个按钮时，焦点会从输入中消失，因此按钮会通过指令隐藏。

第二个问题是我不确定如何访问ngModel以正确添加（或删除）按下的按钮的值。围绕输入而不是直接在输入上使用指令的主要原因是为了格式化我希望放置按钮的位置，但是如果可以在与输入绑定时完成，这肯定会使该指令明显不那么难以完成工作正确。

这是我到目前为止设置的代码：

表格输入：

 <measurements>
    <label>
      <span>Length</span>
      <i ng-show="form.length.$dirty && form.length.$error.required" class="error-icon"></i>
      <input type="number" name="length" ng-model="form.length" required placeholder="Length">
    </label>
  </measurements>

该指令目前：

angular.module('directive.measurements', [])
    .directive('measurements', [function() {
            return {
                restrict: 'EA',
                transclude: true, 
                templateUrl: 'measurements.html',
                scope: {
                },
                link: function(scope, element, attrs, ctrls) {
                    scope.focused = false;
                    var input = element.find('input');
                    input.on('focus', function(event) {
                        scope.focused = true;
                        scope.$apply();
                    });
                    input.on('blur', function(event) {
                        scope.focused = false;
                        scope.$apply();
                    });
                    scope.add = function(amt){

                    };
                }
            }
        }]);

最后是模板'measurements.html'：

<div>
  <span ng-show="focused">
    <button class="button button-small" ng-click="add(.125)">+1/8</button>
    <button class="button button-small" ng-click="add(.25)">+1/4</button> 
    <button class="button button-small" ng-click="add(.5)">+1/2</button>
  </span>
  <span ng-transclude>
  </span>
</div>

修改在聚焦问题上玩了一下之后，我想出了将'模糊'事件更改为以下内容，无论这是否最好我不确定，但确实有效：

if (event.relatedTarget === null) {
  input[0].focus();
} else {
  scope.focused = false;
  scope.$apply();
}

编辑2 以下是plunker：http://plnkr.co/edit/6eUgRhUSA8yI1s42j9JD?p=preview

Answer 1

HERE是对plnkr的改进，使指令有效。

关于你的问题：

通过将event.targetElement与模板中的按钮进行比较来处理失去焦点。
使用ngModelCtrl.$setViewValue实现了增值（使用ngModelCtrl获得require）。

我根本不会使用transclusion - 而是直接在输入元素本身上使用该指令。

如果需要更多帮助，请给我一个喊叫。

更新

如果没有翻译，怎么能实现？

以最简单的方式，您可以使用THAT之类的内容或动态执行此操作（请参阅：HERE）。基本上，您使用$compile服务手动添加按钮＆＃39;面板到DOM。

带按钮的AngularJS输入指令

1 个答案:

更新

如果没有翻译，怎么能实现？