在AngularJS中,“Angular的方法”是什么?
更具体的要求:
当打开一个模态时,将焦点设置在这个模态内预定义的<input>上。 每次<input>变得可见时(例如,通过单击某个按钮),将焦点设置在它上。
我尝试用自动对焦来实现第一个要求,但这只在Modal第一次打开时有效,并且只在某些浏览器中有效(例如在Firefox中它不起作用)。
在AngularJS中,“Angular的方法”是什么?
更具体的要求:
当打开一个模态时,将焦点设置在这个模态内预定义的<input>上。 每次<input>变得可见时(例如,通过单击某个按钮),将焦点设置在它上。
我尝试用自动对焦来实现第一个要求,但这只在Modal第一次打开时有效,并且只在某些浏览器中有效(例如在Firefox中它不起作用)。
当前回答
对于那些使用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...
其他回答
这也可以使用ngModelController。使用1.6以上版本(不知道是否使用旧版本)。
HTML
<form name="myForm">
<input type="text" name="myText" ng-model="myText">
</form>
JS
$scope.myForm.myText.$$element.focus();
--
注意:根据上下文的不同,您可能需要封装一个超时函数。
注意²:当使用controllerAs时,这几乎是相同的。只需将name="myForm"替换为name="vm "。在JS中,vm.myForm.myText.$$element.focus();。
只是顺便送点咖啡。
app.directive 'ngAltFocus', ->
restrict: 'A'
scope: ngAltFocus: '='
link: (scope, el, attrs) ->
scope.$watch 'ngAltFocus', (nv) -> el[0].focus() if nv
我发现使用一般的表达方式很有用。这样你就可以在输入文本有效时自动移动焦点
<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
}
}
});
}
}
};
});
这里只是一个新手,但我能够让它在ui.bootstrap.modal中工作,使用这个指令:
directives.directive('focus', function($timeout) {
return {
link : function(scope, element) {
scope.$watch('idToFocus', function(value) {
if (value === element[0].id) {
$timeout(function() {
element[0].focus();
});
}
});
}
};
});
在$modal中。我使用下面的方法来指示焦点应该放在哪里的元素:
var d = $modal.open({
controller : function($scope, $modalInstance) {
...
$scope.idToFocus = "cancelaAteste";
}
...
});
在模板上我有这个:
<input id="myInputId" focus />
这工作得很好,并以一种角度的方式来聚焦输入控件
angular.element('#elementId').focus()
虽然这不是一种纯粹的角方式来完成任务,但语法遵循了角风格。Jquery使用Angular间接和直接访问DOM (jQLite => Jquery Light)。
如果需要,这段代码可以很容易地放在一个简单的角指令中,其中element可以直接访问。