在AngularJS中,“Angular的方法”是什么?
更具体的要求:
当打开一个模态时,将焦点设置在这个模态内预定义的<input>上。 每次<input>变得可见时(例如,通过单击某个按钮),将焦点设置在它上。
我尝试用自动对焦来实现第一个要求,但这只在Modal第一次打开时有效,并且只在某些浏览器中有效(例如在Firefox中它不起作用)。
在AngularJS中,“Angular的方法”是什么?
更具体的要求:
当打开一个模态时,将焦点设置在这个模态内预定义的<input>上。 每次<input>变得可见时(例如,通过单击某个按钮),将焦点设置在它上。
我尝试用自动对焦来实现第一个要求,但这只在Modal第一次打开时有效,并且只在某些浏览器中有效(例如在Firefox中它不起作用)。
当前回答
我发现使用一般的表达方式很有用。这样你就可以在输入文本有效时自动移动焦点
<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">
该指令的代码:
.directive('mooFocusExpression', function ($timeout) {
return {
restrict: 'A',
link: {
post: function postLink(scope, element, attrs) {
scope.$watch(attrs.mooFocusExpression, function (value) {
if (attrs.mooFocusExpression) {
if (scope.$eval(attrs.mooFocusExpression)) {
$timeout(function () {
element[0].focus();
}, 100); //need some delay to work with ng-disabled
}
}
});
}
}
};
});
其他回答
这可能是ES6时代最简单的解决方案。
添加下面的一行指令使得HTML的“autofocus”属性在Angular.js上有效。
.directive('autofocus', ($timeout) => ({link: (_, e) => $timeout(() => e[0].focus())}))
现在,你可以使用HTML5自动对焦语法,比如:
<input type="text" autofocus>
我发现使用一般的表达方式很有用。这样你就可以在输入文本有效时自动移动焦点
<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">
该指令的代码:
.directive('mooFocusExpression', function ($timeout) {
return {
restrict: 'A',
link: {
post: function postLink(scope, element, attrs) {
scope.$watch(attrs.mooFocusExpression, function (value) {
if (attrs.mooFocusExpression) {
if (scope.$eval(attrs.mooFocusExpression)) {
$timeout(function () {
element[0].focus();
}, 100); //need some delay to work with ng-disabled
}
}
});
}
}
};
});
我写了一个双向绑定焦点指令,就像最近的model。
你可以像这样使用focus指令:
<input focus="someFocusVariable">
如果你在控制器的任何地方设置someFocusVariable范围变量为真,输入就会被聚焦。如果你想“模糊”你的输入,someFocusVariable可以设置为false。这就像Mark Rajcok的第一个答案,但是有双向绑定。
下面是指令:
function Ctrl($scope) {
$scope.model = "ahaha"
$scope.someFocusVariable = true; // If you want to focus initially, set this to true. Else you don't need to define this at all.
}
angular.module('experiement', [])
.directive('focus', function($timeout, $parse) {
return {
restrict: 'A',
link: function(scope, element, attrs) {
scope.$watch(attrs.focus, function(newValue, oldValue) {
if (newValue) { element[0].focus(); }
});
element.bind("blur", function(e) {
$timeout(function() {
scope.$apply(attrs.focus + "=false");
}, 0);
});
element.bind("focus", function(e) {
$timeout(function() {
scope.$apply(attrs.focus + "=true");
}, 0);
})
}
}
});
用法:
<div ng-app="experiement">
<div ng-controller="Ctrl">
An Input: <input ng-model="model" focus="someFocusVariable">
<hr>
<div ng-click="someFocusVariable=true">Focus!</div>
<pre>someFocusVariable: {{ someFocusVariable }}</pre>
<pre>content: {{ model }}</pre>
</div>
</div>
这是小提琴:
http://fiddle.jshell.net/ubenzer/9FSL4/8/
你可以创建一个指令,将焦点集中在postLinking的装饰元素上:
angular.module('directives')
.directive('autoFocus', function() {
return {
restrict: 'AC',
link: function(_scope, _element) {
_element[0].focus();
}
};
});
然后在你的html中:
<input type="text" name="first" auto-focus/> <!-- this will get the focus -->
<input type="text" name="second"/>
这适用于情态动词和ng-if切换的元素,而不适用于ng-show,因为postlinks只发生在HTML处理中。
对于那些使用Bootstrap插件的Angular用户:
http://angular-ui.github.io/bootstrap/#/modal
你可以挂钩到模态实例的开放承诺:
modalInstance.opened.then(function() {
$timeout(function() {
angular.element('#title_input').trigger('focus');
});
});
modalInstance.result.then(function ( etc...