2014-11-21 41 views
3

我正在使用ui.bootstrap折叠指令来显示下拉菜单。 我想在用户点击div之外时自动折叠它。angularjs ng-blur在Chrome或Firefox中不起作用

当用户点击过滤器按钮我设置集中使用:

.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()"> 

控制器

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

});

它在IE v11中有效,但选中复选框时焦点也会丢失。 它在Chrome v38或Firefox v33.1中不起作用。

example code

回答

相关问题