我有一个 AngularDart 组件，每次组件显示时如何让文本输入字段自动聚焦? [英] I have an AngularDart component, how to get the text input field to auto-focus every time the component shows?

问题描述

我在 AngularDart 组件中有一个文本输入，如下所示:

I have a text input in a AngularDart component like the following:

<input type="email" id="inputFirstName" ng-model="cmp.inputFirstName">

如何让文本输入在每次组件显示时自动聚焦?

How can I make the text input auto-focus every time the component shows?

我尝试设置 html5 属性 autofocus，但这仅在第一次显示组件时有效.

I tried setting the html5 attribute autofocus, but that only works on the first time the component is displayed.

推荐答案

您可以尝试为此使用自定义指令(新装饰器):

You could try to use a custom Directive (new Decorator) for this:

import 'package:angular/angular.dart' as ng;
import 'dart:html';

@ng.Decorator(selector: '[autofocus]')
class AutoFocusDecorator implements ng.AttachAware{
  InputElement inputElement;

  AutoFocusDecorator(Element this.inputElement);

  @override
  void attach() {
    inputElement.focus();
  }
}

并像使用它一样

<input type="email" id="inputFirstName" ng-model="cmp.inputFirstName" autofocus>

这篇关于我有一个 AngularDart 组件，每次组件显示时如何让文本输入字段自动聚焦?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！