Question

我有跟随问题（可能有点复杂和难以描述，但我尝试了）：

我正在为我的网络应用程序中的某些数字字段构建一个带有angularJS的输入辅助组件。

现在，这个Web应用程序有很多代码和逻辑，所以我试着解释一下我们的组件是如何工作的：

每个组件都有自己的html-template，scss（css）文件和两个typescrpt文件，一个是组件的指令，一个是模块，我们为整个应用程序设置它。

所以我们的输入辅助组件有以下文件：

HTML-Template（inputHelper.html）：

<div class="wscNumberInputHelperComponent">
    <div class="cInputWithButton">
        <div ng-transclude></div>

        <div class="cInputButton" ng-click="ctrl.isHelperShown = true" wsc-tooltip="{data: ctrl.currentValue, template: '<wsc-number-input-helper-tooltip></wsc-number-input-helper-tooltip>', class: 'cNumberInputHelperTooltip', pointerPosition: 'End'}">
            <wsc-icon class="cInputAddonIcon" icon="ctrl.iconName"></wsc-icon>
        </div>
    </div>
</div>

比指令（inputHelper.directive.ts），我们处理单个组件标签的绑定等等：

import {WsController} from '../../../shared/superclasses/controller';

export class WscNumberInputHelper extends WsController {
    static componentName = 'wscNumberInputHelper';
    static templateUrl = 'app/comp/wsComp/wscNumberInputHelper/wscNumberInputHelper.html';
    static componentOptions = {
        transclude: true,
        bindings: {
            iconName: '@',
            currentValue: '='
        }
    } as ng.IComponentOptions;
}

至少是模块（inputHelper.module.ts），我们为模块设置了它：

import {WscNumberInputHelper} from './wscNumberInputHelper.directive';
import {WscNumberInputHelperTooltip} from './wscNumberInputHelperTooltip/wscNumberInputHelperTooltip.directive';

let ngModule = angular.module('wsComp.wscNumberInputHelper', []);

WscNumberInputHelper.register(ngModule);
WscNumberInputHelperTooltip.register(ngModule);

所以这是相互联系的，当我们在任何输入字段周围放置我们的单个组件标记时，我们在输入字段右边有一个带图标的div（在html模板中，div为类{{1 }}

现在当我们点击这个div时，我们打开另一个组件（工具提示），其中包含我们的输入助手html / logic。这发生在以下代码行（template-html）中：

cInputButton

正如您所看到的，我们的工具提示组件也可以使用绑定，我们可以在其中提供必须显示的模板。这个模板包含一个div。现在，我想在输入帮助器的div上创建一个<div class="cInputButton" ng-click="ctrl.isHelperShown = true" wsc-tooltip="{data: ctrl.currentValue, template: '<wsc-number-input-helper-tooltip></wsc-number-input-helper-tooltip>', class: 'cNumberInputHelperTooltip', pointerPosition: 'End'}">并找出，按下了哪个键。我知道这是如何工作的，我必须给我的div这样的tabindex：ng-keypress然后在我的输入助手的控制器中调用一个方法（它与上面的指令不一样）就像这个：tabindex="0"。比我能得到钥匙。问题是，我的工具提示与我的输入助手不在同一个html中，这是在工具提示中，所以我必须再次点击输入助手的div来实际设置焦点。当我用按钮打开工具提示时，我怎么能提前做到这一点？

这非常复杂，如果问题很难理解，我很抱歉，但我不得不尝试，我没有想法。重要提示：inputhelper html-template（在工具提示中）也是一个拥有自己的指令和scss的自己的模板，它只在同一个模块中注册（inputHelper.module.ts）。

谢谢和欢呼。

Answer 1

这是我的解决方案：

这是工具提示中输入助手组件的模板：

<div class="cInputHelper" tabindex="0" ng-keypress="ctrl.pressedKey($event)">
    <div class="cContainer">
        <div class="cKeys">
            <div class="cKey" ng-repeat="key in ctrl.keys" ng-click="ctrl.modifyValue(key.value)">{{key.label}}</div>
        </div>
        <div class="cSideView">
            <div class="cSideViewItems">
                <span ng-if="!ctrl.lastInputsList.length">Keine Vorschläge (HC)</span>
                <div class="cSideViewItem cLastValue" ng-repeat="item in ctrl.lastInputsList">{{item.value}}</div>
            </div>
            <div class="cSideViewItem cSubmit">OK (HC)</div>
        </div>
    </div>
</div>

在课程cInputHelper上，我有tabindex和ng-keypress来处理我的div上的关键事件。这只有效，当我的div也有焦点。因此来自angularJS的每个组件都有$onInit()方法，它是组件的构造函数（请参阅：https://docs.angularjs.org/guide/component）所以我使用jQuery将焦点设置在我的div上：

$onInit() {
    $(".cInputHelper").focus();
}

之后就可以了！

顺便提一下好消息： ng-keypress仅适用于input，textarea等可编辑元素。如果您想使用in像div上的其他人一样，你必须给这个元素一个tabindex并且还要关注它。比ng-keypress也适用于不可编辑的元素。

干杯。

使用ng-click设置焦点在div上

1 个答案: