jQuery addClass似乎在angularjs控制器初始化程序中不起作用

Question

我有以下HTML：

<div data-ng-controller="CountdownCtrl" class="row countdown">
    <div ng-repeat="event in events" class="hidden event col-sm-4">
    ...

為此，我正在嘗試刪除事件DIV上的隱藏類：

app.controller('CountdownCtrl', function($scope) {
    ...
    $(".countdown .event").removeClass("hidden").addClass("Hello");
    ...

我也嘗試過在控制器外部使用JQuery位，但是似乎並沒有觸發，我也嘗試過添加日志記錄：

    $(".countdown .event").removeClass(function() { $log("Hello World"); return "hidden";}).addClass("Hello");

jQuery頁面和示例似乎並不表明我需要任何迭代器。

我什至嘗試了一些接近他們的例子：

    $("p").removeClass(function() { $log("Hello World"); return "hidden";}).addClass("Hello");

但我沒有記錄日志，也沒有應用“ Hello”類的段落。

我究竟做錯了什么？

Answer 1

而是在directive定義鏈接函數中執行此操作：

 app.directive('event', function (){
      return {
         restrict: 'C', // C for class directives
         link: function (scope, el, attrs){
              // do that here
               $(el).removeClass("hidden").addClass("Hello");
         }
     }
 });

或者另一個選擇是使用ng-class例如：

   <div ng-repeat="event in events" class="event col-sm-4" ng-class='{hidden: 2+2==4}'>

在這里您可以注意到它應該有一些真實的條件要添加，否則就不應該添加。

Answer 2

這管用嗎？ 您忘記了,

$(".countdown,.event").removeClass("hidden").addClass("Hello");

$（“。intro，.demo”）具有“ intro”或“ demo”類的所有元素

見w3schools

Answer 3

控制器：

app.controller('CountdownCtrl', function($scope) {
  // default eventClass value
  $scope.eventClass = 'hidden';

  ...
  // your logic
  $scope.eventClass = 'Hello';
  ...

HTML：

<div data-ng-controller="CountdownCtrl" class="row countdown">
    <div ng-repeat="event in events" class="{{eventClass}} event col-sm-4">
...

Answer 4

您只需要等待，直到所有元素都已加載。

一種方法是在控制器代碼外用$(document).ready()包裝它：

$( document ).ready(function() {
    $(".countdown .event").removeClass("hidden").addClass("Hello");
});

但是，請記住，如果在不重新加載整個頁面的情況下更改狀態，則代碼將不會再次運行。 在這種情況下，您需要處理狀態更改事件，並在其中添加代碼。

Answer 5

嘗試這個，

  $(".countdown, .event").removeClass("hidden").addClass("Hello");