触发自定义jquery单击Angular自定义指令答案

【问题标题】：Triggering custom jquery click on Angular Custom Directive触发自定义jquery单击Angular自定义指令
【发布时间】：2016-02-29 18:05:28
【问题描述】：

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

问题：我得到$apply 已经在进行中错误

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

中

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

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

指令：

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

有人可以提出一个解决方案，以便我现在（使用 $timeout 之后）切换 multiSelect 下拉菜单而不是仅在所有点击中打开吗？

【问题讨论】：

标签： javascript jquery angularjs

【解决方案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;
      }
    });
});

【讨论】：

【解决方案2】：

将其从$scope.$apply 中删除

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

为此首先需要了解$scope.$apply()

AngularJs 在内部为视图中创建的所有数据绑定创建一个“监视”并调用 $scope.$digest() 依次遍历所有监视并检查任何监视变量是否已更改。当您调用 $scope.$apply() 时，它会在内部调用 $scope.$digest() 以便刷新数据绑定。

监听器指令，例如 ng-click，向 DOM 注册监听器。当 DOM 侦听器触发时，指令执行关联的表达式并使用 $apply() 方法更新视图。

当接收到外部事件（如用户操作、计时器或 XHR）时，必须通过 $apply() 方法将关联的表达式应用于范围，以便正确更新所有侦听器 (ref)。

所以在你的情况下，$scope.$apply() 已经在点击事件上被调用，所以抛出了一个错误。

阅读this也很有用

【讨论】：