在角路设置元素焦点 [英] Set element focus in angular way

问题描述

查找具有角怎么设置焦点元素的例子后，我看到他们大多使用一些变量来观察，然后将焦点设置，且大多使用一个不同的变量，他们希望将焦点设置每个字段。在表单中，有很多领域，在很多不同的变量暗示。

After look for examples of how set focus elements with angular, i saw that most of them use some variable to watch for then set focus, and most of them use one different variable for each field they want to set focus. In a form, with a lot of fields, that implies in a lot of different variables.

考虑到jQuery的方式，但想要做的，在角度的方式，我做了，我们在使用元素的ID的功能设置焦点的解决方案，所以，如我在角度很新，我想获得一些如果意见这种方式是正确的，有问题，什么，什么都可以帮助我的角度做到这一点的更好的方法。

With jquery way in mind, but wanting to do that in angular way, i made a solution that we set focus in any function using the element's id, so, as i am very new in angular, i would like to get some opinions if that way is right, have problems, whatever, anything that could help me do this the better way in angular.

基本上，我创建了观看由用户用指令定义的范围值，或默认的focusElement指令，而当该值是相同元素的ID，该元素将焦点设置本身。

Basically, i create a directive that watch a scope value defined by the user with directive, or the default's focusElement, and when that value is the same as the element's id, that element set focus itself.

angular.module('appnamehere')
  .directive('myFocus', function () {
    return {
      restrict: 'A',
      link: function postLink(scope, element, attrs) {
        if (attrs.myFocus == "") {
          attrs.myFocus = "focusElement";
        }
        scope.$watch(attrs.myFocus, function(value) {
          if(value == attrs.id) {
            element[0].focus();
          }
        });
        element.on("blur", function() {
          scope[attrs.myFocus] = "";
          scope.$apply();
        })        
      }
    };
  });

这需要一些理由来获得焦点的输入，会做这样

An input that needs to get focus by some reason, will do this way

<input my-focus id="input1" type="text" />

下面的任何元素将焦点设置：

Here any element to set focus:

<a href="" ng-click="clickButton()" >Set focus</a>

和的例子函数将焦点设置：

And the example function that set focus:

$scope.clickButton = function() {
    $scope.focusElement = "input1";
}

是，在角好的解决办法？有问题，与我可怜的经验，我看不到了吗？

Is that a good solution in angular? Have problems that with my poor experience i not see yet?

感谢您

（对不起我的英语）

推荐答案

您的解决方案的问题是，当被绑在创建一个新的作用域其他指令，例如，它不能很好地工作 NG-重复。一个更好的解决办法是简单地创建一个服务功能，使您能够专注势在必行内的控制器或在HTML声明重点元素的元素。

The problem with your solution is that it does not work well when tied down to other directives that creates a new scope, e.g. ng-repeat. A better solution would be to simply create a service function that enables you to focus elements imperatively within your controllers or to focus elements declaratively in the html.

演示

DEMO

JAVASCRIPT

的服务的

 .factory('focus', function($timeout, $window) {
    return function(id) {
      // timeout makes sure that it is invoked after any other event has been triggered.
      // e.g. click events that need to run before the focus or
      // inputs elements that are in a disabled state but are enabled when those events
      // are triggered.
      $timeout(function() {
        var element = $window.document.getElementById(id);
        if(element)
          element.focus();
      });
    };
  });

的指令的

  .directive('eventFocus', function(focus) {
    return function(scope, elem, attr) {
      elem.on(attr.eventFocus, function() {
        focus(attr.eventFocusId);
      });

      // Removes bound events in the element itself
      // when the scope is destroyed
      scope.$on('$destroy', function() {
        elem.off(attr.eventFocus);
      });
    };
  });

的控制器的

.controller('Ctrl', function($scope, focus) {
    $scope.doSomething = function() {
      // do something awesome
      focus('email');
    };
  });

HTML

<input type="email" id="email" class="form-control">
<button event-focus="click" event-focus-id="email">Declarative Focus</button>
<button ng-click="doSomething()">Imperative Focus</button>

这篇关于在角路设置元素焦点的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！