在AngularJS中,“Angular的方法”是什么?
更具体的要求:
当打开一个模态时,将焦点设置在这个模态内预定义的<input>上。 每次<input>变得可见时(例如,通过单击某个按钮),将焦点设置在它上。
我尝试用自动对焦来实现第一个要求,但这只在Modal第一次打开时有效,并且只在某些浏览器中有效(例如在Firefox中它不起作用)。
在AngularJS中,“Angular的方法”是什么?
更具体的要求:
当打开一个模态时,将焦点设置在这个模态内预定义的<input>上。 每次<input>变得可见时(例如,通过单击某个按钮),将焦点设置在它上。
我尝试用自动对焦来实现第一个要求,但这只在Modal第一次打开时有效,并且只在某些浏览器中有效(例如在Firefox中它不起作用)。
当前回答
首先,关注1.1的路线图是一种正式的方式。同时,您可以编写一个指令来实现设置焦点。
其次,在一个项目变得可见之后设置焦点,目前需要一个变通方法。只是用$timeout延迟对元素focus()的调用。
因为同样的控制器-修改- dom问题存在于焦点,模糊和选择,我建议有一个ng-target指令:
<input type="text" x-ng-model="form.color" x-ng-target="form.colorTarget">
<button class="btn" x-ng-click="form.colorTarget.focus()">do focus</button>
Angular线程在这里:http://goo.gl/ipsx4,更多细节在这里:http://goo.gl/4rdZa
下面的指令将在你的控制器中创建一个由ng-target属性指定的.focus()函数。(它也创建了.blur()和.select()。)演示:http://jsfiddle.net/bseib/WUcQX/
其他回答
你也可以使用angular内置的jqlite功能。
angular.element (.selector) .trigger(重点);
这可能是ES6时代最简单的解决方案。
添加下面的一行指令使得HTML的“autofocus”属性在Angular.js上有效。
.directive('autofocus', ($timeout) => ({link: (_, e) => $timeout(() => e[0].focus())}))
现在,你可以使用HTML5自动对焦语法,比如:
<input type="text" autofocus>
对于那些使用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...
你可以使用下面的指令,在HTML输入中获取一个bool值来关注它…
//js file
angular.module("appName").directive("ngFocus", function () {
return function (scope, elem, attrs, ctrl) {
if (attrs.ngFocus === "true") {
$(elem).focus();
}
if (!ctrl) {
return;
}
elem.on("focus", function () {
elem.addClass("has-focus");
scope.$apply(function () {
ctrl.hasFocus = true;
});
});
};
});
<!-- html file -->
<input type="text" ng-focus="boolValue" />
你甚至可以在控制器中设置一个函数为ngFocus指令值 注意下面的代码…
<!-- html file -->
<input type="text" ng-focus="myFunc()" />
//controller file
$scope.myFunc=function(){
if(condition){
return true;
}else{
return false;
}
}
这个指令发生在HTML页面渲染时。
以编程方式调用元素上的任何操作:click(), focus(), select()…
用法:
<a href="google.com" auto-action="{'click': $scope.autoclick, 'focus': $scope.autofocus}">Link</a>
指令:
/**
* Programatically Triggers given function on the element
* Syntax: the same as for ng-class="object"
* Example: <a href="google.com" auto-action="{'click': autoclick_boolean, 'focus': autofocus_boolean}">Link</a>
*/
app.directive('focusMe', function ($timeout) {
return {
restrict: 'A',
scope: {
autoAction: '<',
},
link: function (scope, element, attr) {
const _el = element[0];
for (const func in scope.autoAction) {
if (!scope.autoAction.hasOwnProperty(func)) {
continue;
}
scope.$watch(`autoAction['${func}']`, (newVal, oldVal) => {
if (newVal !== oldVal) {
$timeout(() => {
_el[func]();
});
}
});
}
}
}
});
要解决这个问题,最好在controller或ng-init中设置初始化变量:
<input ng-init="autofocus=true" auto-action="{'focus': autofocus}">