在查找了如何设置焦点元素与角度的例子后,我看到他们大多使用一些变量来观察,然后设置焦点,他们大多数使用一个不同的变量,他们想要设置焦点的每个字段。在一种形式,有很多字段,意味着在很多不同的变量。
用jquery的方式,但想要以角度的方式做,我做了一个解决方案,我们设置焦点在任何函数使用元素的id,所以,因为我是非常新的角度,我想得到一些意见,如果那种方式是正确的,有问题,无论什么,任何可以帮助我做这个更好的方式在角。
基本上,我创建一个指令,监视用户使用指令定义的范围值,或默认的focusElement,当该值与元素的id相同时,该元素集本身的焦点。
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(); }) } }; });
需要通过某种原因获得焦点的输入,将这样做
<input my-focus id="input1" type="text" />
这里设置焦点的任何元素:
<a href="" ng-click="clickButton()" >Set focus</a>
和设置焦点的示例函数:
$scope.clickButton = function() { $scope.focusElement = "input1"; }
这是一个好的解决方案在角?它有问题,我的糟糕的经验,我还没有看到?
您的解决方案的问题是,它绑定到其他指令创建一个新的范围,不能很好地工作。 ng重复。一个更好的解决方案是简单地创建一个服务函数,使您能够在控制器中强制地聚焦元素或在HTML中声明性地聚焦元素。
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>