Angularjs ng-blur not working in Chrome or Firefox
I am using the ui.bootstrap collapse directive to display a dropdown menu. I would like to automatically collapse it when the user clicks outside of the div.
When the user clicks the 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 the checkbox is selected. It doesn't work in Chrome v38 or Firefox version 33.1.
+3
source to share