javascript - 触发自定义 jquery 单击 Angular 自定义指令

Question

我正在为 multiSelect 下拉菜单使用自定义指令。我需要使用自定义按钮自定义触发打开和关闭多选列表。

问题:我遇到了$apply already in progress错误

解决方案: 为了解决这个问题，我将 jQuery 函数包装在 $timeout

中

$timeout(function () {
    $('button.dropdown-toggle').trigger('click');
});

但是，现在我可以对指令进行自定义点击，并且我的 multiSelect 会打开，但现在如果我想在第二次点击时关闭选择框，它会闪烁并保持打开状态。 ;(

指令:

if (!parentFound) {
    $scope.$apply(function(){
        $scope.open = false;
    });
}

有人可以提出一个解决方案，以便我现在可以切换 multiSelect 下拉列表(在使用 $timeout 之后)，而不是只在所有点击中打开吗？

Answer 1

只取反$scope值:

$scope.$apply(function() {
  if($scope.open) { //only close when it is open
    $scope.open = !$scope.open;
  }
});

如果您希望在选择框外单击时关闭下拉列表，您可以使用另一个自定义指令，它会在窗口上监听单击事件。这将广播一个您可以收听的新事件:

myApp.directive('dropdownListener', function ($window, $rootScope) {
    return {
        restrict: 'A',

        link: function(scope, element, attr) {
          var w = angular.element($window);

          w.bind('click', function(){
            $rootScope.$broadcast('dropdown:close');
          });
        }
    }
});

这意味着您可以通过包含监听器 dropdown:close 事件来修改原始操作:

$scope.$on('dropdown:close', function (event, data) {
   $scope.$apply(function() {
      if($scope.open) { //only close when it is open
        $scope.open = !$scope.open;
      }
    });
});