Setting focus on an input field after ng-show
This is a simple directive that might work for you
<input focus-on="!!myResourceData" />
.directive('focusOn',function($timeout) {
return {
restrict : 'A',
link : function($scope,$element,$attr) {
$scope.$watch($attr.focusOn,function(_focusVal) {
$timeout(function() {
_focusVal ? $element[0].focus() :
$element[0].blur();
});
});
}
}
})
I have extended the answer to work with angular's ng-show
and ng-hide
app.directive('focusOnShow', function($timeout) {
return {
restrict: 'A',
link: function($scope, $element, $attr) {
if ($attr.ngShow){
$scope.$watch($attr.ngShow, function(newValue){
if(newValue){
$timeout(function(){
$element[0].focus();
}, 0);
}
})
}
if ($attr.ngHide){
$scope.$watch($attr.ngHide, function(newValue){
if(!newValue){
$timeout(function(){
$element[0].focus();
}, 0);
}
})
}
}
};
})
All you need is to add attribute focus-on-show
<input type="text" ng-show="editing" focus-on-show />