angularjs ng-blur not working in Chrome or Firefox
10,419
In the end I have used this approach:
Related videos on Youtube
Author by
witpo
Updated on June 04, 2022Comments
-
witpo almost 2 years
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.