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

Question

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

问题：我收到了$ apply正在进行的错误

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

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

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

指示：

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

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

Answer 1

将其从$scope.$apply删除$scope.$apply

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

为此，首先需要了解$ scope。$ apply（）

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

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

收到外部事件（例如用户操作，计时器或XHR）时，必须通过$ apply（）方法将关联的表达式应用于作用域，以便正确更新所有侦听器（ 参考 ）。

因此，在您的情况下，$ scope。$ apply（）已在click事件中调用，因此引发错误。

读这篇也很有用

Answer 2

仅取反$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');
          });
        }
    }
});

这意味着您可以通过包含一个listener 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;
      }
    });
});