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”类的元素或“演示”

请参阅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");

Jquery addClass似乎不适用于angularjs控制器初始化程序

5 个答案: