在查看了如何使用angular设置焦点元素的示例之后，我看到他们中的大多数使用一些变量来观察然后设置焦点，并且大多数变量为他们想要设置焦点的每个字段使用一个不同的变量。在一个有很多字段的形式中，这意味着有很多不同的变量。
考虑到jquery的方式，但是想要以有角度的方式做到这一点，我提出了一个解决方案，我们使用元素的id设置焦点在任何函数中，所以，因为我是角度非常新的，我＆＃ 39;如果这种方式是正确的，有问题，无论如何，任何可以帮助我以更好的方式做到这一点的任何事情都希望得到一些意见。
基本上，我创建了一个指令，用于监视用户使用指令或默认的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";
}
这是一个角度很好的解决方案吗？是否有问题，由于我的经验不佳，我还没有看到？
答案 0 :(得分：172)
您的解决方案的问题在于，当绑定到创建新范围的其他指令时，它不能很好地工作，例如ng-repeat。更好的解决方案是简单地创建一个服务函数，使您能够在控制器中强制关注元素，或者在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>
答案 1 :(得分：18)
关于这个解决方案，我们可以创建一个指令并将其附加到DOM元素，该元素必须在满足给定条件时获得焦点。通过遵循这种方法，我们避免将控制器耦合到DOM元素ID。
示例代码指令：
gbndirectives.directive('focusOnCondition', ['$timeout',
function ($timeout) {
var checkDirectivePrerequisites = function (attrs) {
if (!attrs.focusOnCondition && attrs.focusOnCondition != "") {
throw "FocusOnCondition missing attribute to evaluate";
}
}
return {
restrict: "A",
link: function (scope, element, attrs, ctrls) {
checkDirectivePrerequisites(attrs);
scope.$watch(attrs.focusOnCondition, function (currentValue, lastValue) {
if(currentValue == true) {
$timeout(function () {
element.focus();
});
}
});
}
};
}
]);
可能的用法
.controller('Ctrl', function($scope) {
$scope.myCondition = false;
// you can just add this to a radiobutton click value
// or just watch for a value to change...
$scope.doSomething = function(newMyConditionValue) {
// do something awesome
$scope.myCondition = newMyConditionValue;
};
}）;
HTML
<input focus-on-condition="myCondition">
答案 2 :(得分：11)
我希望尽可能避免使用DOM查找，监视和全局发射器，因此我使用更直接的方法。使用指令分配一个专注于指令元素的简单函数。然后在控制器范围内的任何需要的地方调用该函数。
这是将其附加到范围的简化方法。请参阅完整代码段以处理controller-as语法。
指令：
app.directive('inputFocusFunction', function () {
'use strict';
return {
restrict: 'A',
link: function (scope, element, attr) {
scope[attr.inputFocusFunction] = function () {
element[0].focus();
};
}
};
});
并在html中：
<input input-focus-function="focusOnSaveInput" ng-model="saveName">
<button ng-click="focusOnSaveInput()">Focus</button>
或在控制器中：
$scope.focusOnSaveInput();
angular.module('app', [])
.directive('inputFocusFunction', function() {
'use strict';
return {
restrict: 'A',
link: function(scope, element, attr) {
// Parse the attribute to accomodate assignment to an object
var parseObj = attr.inputFocusFunction.split('.');
var attachTo = scope;
for (var i = 0; i < parseObj.length - 1; i++) {
attachTo = attachTo[parseObj[i]];
}
// assign it to a function that focuses on the decorated element
attachTo[parseObj[parseObj.length - 1]] = function() {
element[0].focus();
};
}
};
})
.controller('main', function() {});<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script>
<body ng-app="app" ng-controller="main as vm">
<input input-focus-function="vm.focusOnSaveInput" ng-model="saveName">
<button ng-click="vm.focusOnSaveInput()">Focus</button>
</body>
已编辑以提供有关此方法原因的更多说明，并扩展控制器使用的代码段。
答案 3 :(得分：9)
你可以尝试
angular.element('#<elementId>').focus();
例如。
angular.element('#txtUserId').focus();
它为我工作。
答案 4 :(得分：4)
另一种选择是使用Angular的内置pub-sub架构，以便通知您的指令。与其他方法类似，但它并没有直接与属性相关联，而是在聆听特定键的范围。
指令：
angular.module("app").directive("focusOn", function($timeout) {
return {
restrict: "A",
link: function(scope, element, attrs) {
scope.$on(attrs.focusOn, function(e) {
$timeout((function() {
element[0].focus();
}), 10);
});
}
};
});
HTML：
<input type="text" name="text_input" ng-model="ctrl.model" focus-on="focusTextInput" />
控制器：
//Assume this is within your controller
//And you've hit the point where you want to focus the input:
$scope.$broadcast("focusTextInput");
答案 5 :(得分：3)
我更喜欢使用表达式。这使得我可以在字段有效时关注按钮，达到一定长度，当然还有加载后。
<button type="button" moo-focus-expression="form.phone.$valid">
<button type="submit" moo-focus-expression="smsconfirm.length == 6">
<input type="text" moo-focus-expression="true">
在复杂的表格上，这也减少了为聚焦目的创建额外范围变量的需要。