Angular Material 对话框：将焦点设置在第一项上答案

【问题标题】：Angular Material Dialog: Set focus on the first itemAngular Material 对话框：将焦点设置在第一项上
【发布时间】：2017-05-31 06:34:11
【问题描述】：

我正在使用带有 Material Design 的 Angular 1.5.x，并且我有一个自定义对话框，我想在显示对话框时选择第一个输入字段。

我该怎么做？

我整理了这个问题的一个活生生的例子： https://codepen.io/anon/pen/xdoqmZ?editors=1010

这里是代码；

  $mdDialog.show({
    parent: parentEl,
    targetEvent: $event, // determines source location of the dialog
    template:
            ' <md-dialog>' +
        '   <md-content>Hello {{ username }}!</md-content>' +
        '   <div class="md-actions">' +
        '     <form>' + 
        '       <div>Given names: <input /></div>' +
        '       <div>Surname:  <input /></div>' +
        '       <div>Address:  <input /></div>' +
        '       <div>Building: <input /></div>' +
        '       <div>Level:    <input /></div>' +
        '       <div>Street:   <input /></div>' +
        '       <div>Suburb:   <input /></div>' +
        '       <div>Postcode: <input /></div>' +
        '       <div>Country:  <input /></div>' +
        '       <div>State:    <input /></div>' +
        '       <div>ABN:      <input /></div>' +
        '       <div>' +
        '         <md-button ng-click="closeDialog()">' +
        '           Close Greeting' +
        '         </md-button>' +
        '       </div>' +
        '     </form>' +
        '   </div>' +
        ' </md-dialog>',
    onComplete: onCompleteAnimation,
    locals: {
      name: $scope.username
    },
    controller: DialogController
  });

在本例中，我希望对话框以 Given Names 为焦点。

【问题讨论】：

标签： angularjs dialog focus angular-material

【解决方案1】：

在 onCompleteAnimation 函数中找到第一个输入和焦点

    onComplete: function(s,e) {
        $(e).find('input').first().focus()
    },
    locals: {
      name: $scope.username
    },
    controller: DialogController

https://codepen.io/anon/pen/ZKgWjQ?editors=1010

【讨论】：

【解决方案2】：

这不是 md-autofocus 的用途吗？所以将它添加到需要关注的元素中 mdAutofocus

【讨论】：