angularjs - Angular Material 对话框 : Set focus on the first item

Question

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

我该怎么做？

我整理了一个问题的实例: 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
  });

在此示例中，我希望出现的对话框中关注焦点的是名字。

Answer 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