角度材质对话框：将焦点设置在第一项上

Question

我在材质设计中使用了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 
    }); 

在这个例子中，我想让对话框出现时以给定名称为重点。

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