javascriptangularjsangular-ui-bootstrapbootstrap-modaljqlite

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?


Solution

  • 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