在AngularJS中,“Angular的方法”是什么?
更具体的要求:
当打开一个模态时,将焦点设置在这个模态内预定义的<input>上。 每次<input>变得可见时(例如,通过单击某个按钮),将焦点设置在它上。
我尝试用自动对焦来实现第一个要求,但这只在Modal第一次打开时有效,并且只在某些浏览器中有效(例如在Firefox中它不起作用)。
在AngularJS中,“Angular的方法”是什么?
更具体的要求:
当打开一个模态时,将焦点设置在这个模态内预定义的<input>上。 每次<input>变得可见时(例如,通过单击某个按钮),将焦点设置在它上。
我尝试用自动对焦来实现第一个要求,但这只在Modal第一次打开时有效,并且只在某些浏览器中有效(例如在Firefox中它不起作用)。
当前回答
这是我最初的解决方案:
砰砰作响
var app = angular.module('plunker', []);
app.directive('autoFocus', function($timeout) {
return {
link: function (scope, element, attrs) {
attrs.$observe("autoFocus", function(newValue){
if (newValue === "true")
$timeout(function(){element[0].focus()});
});
}
};
});
而HTML:
<button ng-click="isVisible = !isVisible">Toggle input</button>
<input ng-show="isVisible" auto-focus="{{ isVisible }}" value="auto-focus on" />
它的作用:
使用ng-show,当输入变得可见时,它会聚焦输入。没用$watch和$on。
其他回答
我写了一个双向绑定焦点指令,就像最近的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/
首先,关注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.element('#elementId').focus()
虽然这不是一种纯粹的角方式来完成任务,但语法遵循了角风格。Jquery使用Angular间接和直接访问DOM (jQLite => Jquery Light)。
如果需要,这段代码可以很容易地放在一个简单的角指令中,其中element可以直接访问。
我编辑Mark Rajcok的focusMe指令,在一个元素中实现多个焦点。
HTML:
<input focus-me="myInputFocus" type="text">
在AngularJs控制器中:
$scope.myInputFocus= true;
AngulaJS指令:
app.directive('focusMe', function ($timeout, $parse) {
return {
link: function (scope, element, attrs) {
var model = $parse(attrs.focusMe);
scope.$watch(model, function (value) {
if (value === true) {
$timeout(function () {
scope.$apply(model.assign(scope, false));
element[0].focus();
}, 30);
}
});
}
};
});
这也可以使用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();。