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

Question

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

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

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

每个组件都有自己的 html-模板，scss (css) 文件，以及两个类型脚本文件，一个是组件的指令，一个是模块，我们为整个应用程序设置它的地方。

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

HTML-模板(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)，我们在其中处理 individual 组件标签等的绑定：

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);

所以这是相互连接的，当我们在任何输入字段周围放置我们的 individual 组件标签时，我们在输入字段的右侧得到一个带有图标的 div (在 html 模板中 div 和 class cInputButton.

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

<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。现在，我想在我的输入助手的 div 上创建一个 ng-keypress 并找出按下了哪个键。我知道这是如何工作的，我必须像这样给我的 div 一个 tabindex：tabindex="0" 然后在我的输入助手的控制器中调用一个方法（它与上面的指令不同）就像这个：ng-keypress="pressedKey($event)"。比我能拿到钥匙。问题是，我的工具提示与我的输入助手不在同一个 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>

在 class cInputHelper 上，我有 tabindex 和 ng-keypress 用于处理 div 上的按键事件。这仅在我的 div 也有焦点时有效。所以来自 angularJS 的每个组件都有 $onInit() 方法，它是组件的构造函数（参见：https://docs.angularjs.org/guide/component）所以我使用 jQuery 来设置我的焦点div 像这样：

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

之后就可以了！

顺便提个好消息： ng-keypress 只适用于 input、textarea 等可编辑元素。如果您想在 div 上对像我这样的其他人使用 in，你必须给这个元素一个 tabindex 并且还要将焦点放在它上面。比 ng-keypress 也适用于不可编辑的元素。

干杯。

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

Set focus on div with ng-click

html

jquery

focus

tabindex

angularjs