AngularJS - 指令範圍不元素上設置納克級

我有一個表的數據：

<table class="table table-hover" ng-class="dndElemClass" drag-and-drop> 
    ... 
</table>

我的目標是通過對元素的ondragenter分配$scope.dndElemClass = 'on-drag-enter'給表陰影事件偵聽器：

.on-drag-enter { 
    -webkit-box-shadow: -3px 3px 5px 3px #ccc; 
    ... 
}

的onDragEnter指令如下：

directive('dragAndDrop', function() { 
    return { 
     restrict: 'A', 
     controller: function($scope) { 
      $scope.dndElemClass = ''; 
     }, 
     link: function($scope, elem, attr) { 
      $scope.$watch('currentFolder.canUpload', function(newValue, oldValue) { 
       if (newValue && Modernizr.draganddrop && window.File) { 
        elem[0].ondragenter = function(evt) { 
         evt.stopPropagation(); 
         evt.preventDefault(); 
         $scope.$apply(function() { 
          $scope.dndElemClass = 'on-drag-enter'; 
         }); 
        }; 
        elem[0].ondragleave = function(evt) { 
         evt.stopPropagation(); 
         evt.preventDefault(); 
         $scope.$apply(function() { 
          $scope.dndElemClass = ''; 
         }); 
        }; 
        elem[0].ondrop = function(evt) { 
         ... 
        }; 
       } 
      }); 
     } 
    } 
})

儘管分配的$scope.dndElemClass在ondragenter和ondragleave事件偵聽器的值時，<table>似乎並不被認可的價值和作爲不出現陰影效果分配類。

到目前爲止，我已經測試過，如果我在指令的控制器屬性中設置了類的位置，並在上面的代碼中將其指定爲空白，我知道它會從指令接受它。將控制器中設置的類作爲測試，如果我觸發了ondragenter偵聽器，它將刪除該類。我還確認$scope.$apply()正確地將scope.dndElemClass的值賦值爲日誌記錄，但無論出於何種原因，當設置在事件偵聽器的$scope.$apply()中時，表的ng-class屬性將無法識別變量賦值並認爲它爲空。

UPDATE： 按照Josh的評論，我清理了代碼，這樣，我沒得$apply事件偵聽器回調的變量賦值。

directive('dragAndDrop', function() { 
    return { 
     restrict: 'A', 
     controller: function($scope) { 
      $scope.dndElemClass = ''; 
     }, 
     link: function($scope, elem, attr) { 
      $scope.$watch('currentFolder.canUpload', function(newValue, oldValue) { 
       if (newValue && Modernizr.draganddrop && window.File) { 
        elem.bind('dragenter', function(evt) { 
         evt.stopPropagation(); 
         evt.preventDefault(); 
         $scope.dndElemClass = 'on-drag-enter'; 
        }); 
        elem.bind('dragleave', function(evt) { 
         evt.stopPropagation(); 
         evt.preventDefault(); 
         $scope.dndElemClass = ''; 
        }); 
        elem.bind('drop', function(evt) { 
         //... 
        }); 
       } 
      }); 
     } 
    } 
})

仍然沒有運氣。我可以通過日誌記錄驗證它是否正在執行回調，但沒有辦法讓變量賦值被表ng-class屬性識別。

更新2：我通過AngularJS's documentation on ngClass看完之後更糊塗了。對我而言，我認爲這與在當前控制器（或者在我的情況下，指令的）中設置變量的類的名稱（數組中的名稱）一樣簡單，然後像你一樣指定該變量的名稱元素的ng-class=""屬性中的任何其他位置。但是當我閱讀時，它似乎更復雜，因爲人們使用expressions或toggling the class name(s)。

使用撥動的想法，我分叉my plunker重建情況設置$scope.dndElemClass基於用戶是否觸發dragenter或dragleave一個布爾值。我還包括$scope.$apply()好的措施，因爲我發現我不明白優於.addEventListener或.ondragenter = function() {};的優勢。無論如何，這不會導致表的類被設置爲我所期望的。

來源

2013-03-14 Scott

你爲什麼要離開AngularJS World去運行一個事件，試圖重新輸入它來設置一個範圍變量？爲什麼不簡單地使用'elem.bind（'dragenter'，function（）{...}）'？嘗試簡化你的代碼，看看是否解決了這個問題。 – 2013-03-14 20:53:11

對Angular的.bind（）不熟悉。清理完成後擺脫'$ apply（）'，仍然沒有運氣。 – Scott 2013-03-15 14:23:08

這可能是一個範圍問題。你可以發佈一個簡單的Plunker來演示嗎？ – 2013-03-15 20:06:33

我不確定你是否仍然需要一個答案，但我可能已經修復了你的普遍現象。

裏面的CurrentFolder控制器，加

$scope.dndElemClass = '';

然後包裏面$scope.dndElemClass$apply。

$scope.$apply(function() { $scope.dndElemClass = 'on-drag-enter'; });

查看complete plunk瞭解更清晰的圖片。

enter image description here

來源

2013-07-04 02:58:18

這個答案只是解決了我遇到的類似問題 - 從指令中設置控制器的scope.myVar。 ng-class正在等待更改，但myVar更改時沒有更新。用這個$ apply來包裝它就是訣竅！感謝這個答案！ – JT703 2013-09-04 00:18:54

嘗試設置類範圍然後使用class={{classVariable}}！這適用於我。

來源

2014-12-17 10:14:52

AngularJS - 指令範圍不元素上設置納克級

回答

相關問題