使用AngularJS创建输入后，请关注输入

Question

我一直在使用AngularJS做一个待办事项列表，想知道在点击按钮创建输入框后是否可以专注于输入框。

实际上，我在控制器中的保存功能定义如下：

$scope.save = function() {
    $scope.objetivo.$save()
        .then(function() {
          $scope.message = {
            text : 'Saved'
          };
          $scope.objective = new Objective();
        })
        .catch(function(err) {
          console.log(err.data);
          if(err.data.code === 11000) {
            text = 'This objective is already registered'
          }
          $scope.message = {
            text : text || "Error when saving"
          };
        });
    };

我认为通过添加输入框然后专注于它可能是一种方式，但我不知道该怎么做。

Answer 1

这个fiddle向您展示了如何在异步逻辑上实现焦点元素。

视图

<div ng-controller="MyCtrl">
   <button ng-click="someAsyncFunction()">
     Set focus on async functions
   </button>
   <input type="text"
          set-focus="{{setFocus}}"> 
</div>

AngularJS应用程序

var myApp = angular.module('myApp',[]);

myApp.controller('MyCtrl', function ($scope, $timeout) {
   $scope.someAsyncFunction = function () 
        //the following timeout indicates ansyc functions.
        $timeout(function () {
            $scope.setFocus = true;
        }, 250);
   }
});


myApp.directive('setFocus', function($timeout) {
  return {
    scope: { trigger: '@setFocus' },
    link: function(scope, element) {
      scope.$watch('trigger', function(value) {
        if(value === "true") {
          $timeout(function() {
            element[0].focus();
          },250);
        }
      });
    }
  };
});