Question

我正在使用内联编辑功能（使用Angularjs），我目前在我的控制器中有以下内容：

$scope.toggleEditor = function(){
  $scope.editorEnabled = !$scope.editorEnabled; //toggle editor view

  //can't get this part to work as desired
  $timeout(function(){
    angular.element("#email_editor").focus();
  },100);

}

HTML是：

<div ng-hide="editorEnabled">
  <span class="editable" ng-click="toggleEditor()">{{user.local.email}}</span>
</div>
<div ng-show="editorEnabled">
  <input type="text" id="email_editor" ng-model="user.local.email" ng-blur="toggleEditor()">
</div>

这个想法是，当用户点击电子邮件地址时，它会显示一个文本框，其中包含电子邮件地址。这部分工作正常，但我想在用户点击其他地方时隐藏文本框。因为我使用on-blur指令，所以文本框必须具有焦点才能使其生效。

问题用户点击电子邮件地址后，如何将焦点设置到文本框。请查看我的代码，了解我尝试过的内容。

Answer 1

您的原始问题是因为$timeout未在控制器中注入。但是，您需要避免从Controller访问DOM。您可以将焦点活动移动到可重复使用的指令并保持控制器简单。

实施例： -

app.controller('MainCtrl', function($scope) {
  $scope.toggleEditor = function(){
  $scope.editorEnabled = !$scope.editorEnabled; //toggle editor view
}
}).directive('focus', function(){
  return {
    scope: {
      set: "=" //Create a 2 way binding which you can bind it to editorEnabled
    },
    link:function(scope, elem){

      var unwatch = scope.$watch('set', function(v){
        if(v){
           elem.focus(); //focus on the element when value is set
        }
      });

      scope.$on('$destroy', function(){
         unwatch(); //Just safe cleanup of the watch.
      });
    }
  }
});

并在您的输入集中： -

<input type="text" id="email_editor" ng-model="user.local.email" ng-blur="toggleEditor()" 
              focus set="editorEnabled">

<强> Demo

将焦点设置为切换元素

1 个答案: