单击复选框时,是否有一种更清晰的方式将焦点委托给元素。这是我入侵的脏版本:
HTML
<div ng-controller="MyCtrl">
<input type="checkbox" ng-change="toggled()">
<input id="name">
</div>
的JavaScript
var myApp = angular.module('myApp',[]);
function MyCtrl($scope, $timeout) {
$scope.value = "Something";
$scope.toggled = function() {
console.debug('toggled');
$timeout(function() {
$('#name').focus();
}, 100);
}
}
JSFiddle:http://jsfiddle.net/U4jvE/8/
答案 0 :(得分:17)
$scope.$watch('isChecked', function(newV){
newV && $('#name').focus();
},true);
@asgoth和@Mark Rajcok是正确的。我们应该使用指令。我只是懒惰。
这是指令版本。 plunker我认为将其作为指令的一个很好的理由是你可以重用这个东西。
所以在你的html中你可以将不同的模态分配给不同的集合
<input type="checkbox" ng-model="isCheckedN">
<input xng-focus='isCheckedN'>
directive('xngFocus', function() {
return function(scope, element, attrs) {
scope.$watch(attrs.xngFocus,
function (newValue) {
newValue && element.focus();
},true);
};
});
答案 1 :(得分:7)
另一个指令实现(不需要jQuery),并借用一些@maxisam的代码:
myApp.directive('focus', function() {
return function(scope, element) {
scope.$watch('focusCheckbox',
function (newValue) {
newValue && element[0].focus()
})
}
});
HTML:
<input type="checkbox" ng-model="focusCheckbox">
<input ng-model="name" focus>
由于该指令不创建隔离范围(或子范围),因此该指令假定范围定义了focusCheckbox
属性。
答案 2 :(得分:5)
如果你想让它更有趣,并且支持任何要评估的表达式(不仅仅是变量),你可以这样做:
app.directive('autofocusWhen', function ($timeout) {
return {
link: function(scope, element, attrs) {
scope.$watch(attrs.autofocusWhen, function(newValue){
if ( newValue ) {
$timeout(function(){
element.focus();
});
}
});
}
};
});
你的html可以更加分离,就像那样:
<input type="checkbox" ng-model="product.selected" />
{{product.description}}
<input type="text" autofocus-when="product.selected" />
答案 3 :(得分:0)
更简洁的方法是使用指令来执行切换:
app.directive('toggle', function() {
return {
restrict: 'A',
scope: {
selector: '='
},
link: function(scope, element, attrs) {
element.on('change', function() {
$(scope.selector).focus();
scope.$apply();
});
}
}:
});
你的html会像:
<input type='checkbox' toggle selector='#name'>