觸發自定義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;
      }
    });
});