I am using ui.bootstrap collapse directive to display drop down menu. I would like to automatically collapse it when user clicks outside of the div.

When user clicks on Filter button I set focus using:

.directive('setFocus', function () {
         return {
            restrict: 'A',
            scope: {
                focusValue: "=setFocus"
            },
            link: function ($scope, $element, attrs) {
                $scope.$watch("focusValue", function (currentValue, previousValue) {
                    if (currentValue === true && !previousValue) {
                        $element[0].focus();
                        console.log('set focus  from setFocus directive');
                    } else if (currentValue === false && previousValue) {
                        $element[0].blur();
                        console.log('blurr from setFocus directive');
                    }
                })
        }
        }
});

HTML

<div collapse="isDropDownCollapsed" class='div2' align-element-right='el1' set-focus='!isDropDownCollapsed' ng-blur="toggleMenu()">

Controller

app.controller('testCtrl', function ($scope) {
$scope.isDropDownCollapsed = true;
$scope.toggleMenu = function () {
    $scope.isDropDownCollapsed = !$scope.isDropDownCollapsed;
}

});

It works in IE v11 but focus is also lost when check box is selected. It doesn't work in Chrome v38 or Firefox v33.1.

example code

I am using ui.bootstrap collapse directive to display drop down menu. I would like to automatically collapse it when user clicks outside of the div.

When user clicks on Filter button I set focus using:

.directive('setFocus', function () {
         return {
            restrict: 'A',
            scope: {
                focusValue: "=setFocus"
            },
            link: function ($scope, $element, attrs) {
                $scope.$watch("focusValue", function (currentValue, previousValue) {
                    if (currentValue === true && !previousValue) {
                        $element[0].focus();
                        console.log('set focus  from setFocus directive');
                    } else if (currentValue === false && previousValue) {
                        $element[0].blur();
                        console.log('blurr from setFocus directive');
                    }
                })
        }
        }
});

HTML

<div collapse="isDropDownCollapsed" class='div2' align-element-right='el1' set-focus='!isDropDownCollapsed' ng-blur="toggleMenu()">

Controller

app.controller('testCtrl', function ($scope) {
$scope.isDropDownCollapsed = true;
$scope.toggleMenu = function () {
    $scope.isDropDownCollapsed = !$scope.isDropDownCollapsed;
}

});

It works in IE v11 but focus is also lost when check box is selected. It doesn't work in Chrome v38 or Firefox v33.1.

example code

• javascript
• angularjs
• angular-ui-bootstrap

1 Answer 1

In the end I have used this approach:

https://web.archive/web/20161104225152/http://vadimpopa./onblur-like-for-a-div-in-angularjs-to-close-a-popup/