user1552545 user1552545 - 25 days ago 18
AngularJS Question

Bootstrap $uibModal focus to element

I've created an AngularJs directive, which sets focus to a html element.
But it doesn't work on $uibModal elements:

angular.module('ui.bootstrap.demo')
.directive('focus', ['$timeout', function ($timeout) {
return {
restrict: 'A',
link: function postLink(scope, element, attrs) {
scope.$watch(attrs.focus, function(value) {
if(value === true) {
$timeout(function() {
element[0].focus();
});
}
});
}
};
}]);


http://plnkr.co/edit/BrnFt1kYZN7VsIFRCt3S?p=preview

How can I set focus to an element inside a $uibModal?

Answer

I've found the solution: When I add the autofocus attribute to an input element, the $uibModal sets the focus to it.

    <div class="modal-body">
        <p class="input-group">
          <input type="text" class="form-control" autofocus/>
        </p>
    </div>

http://plnkr.co/edit/yMNLLnSZL86ZYLsnuDV9?p=preview