2016-05-02 2 views
0

У меня есть следующие HTML:Jquery addClass не похоже на работу в angularjs контроллер инициализатора

<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» применяется.

Что я делаю неправильно?

+0

Пробовал ли вы запускать это нажатием кнопки или с помощью таймера? Может быть, к моменту запуска кода еще нет элементов. –

+0

Кровавые таймеры.Мой JS-файл является последним в заказе, поэтому тот факт, что он попадает в контроллер, указывает на то, что DOM загружен, JS-файлы JQuery и Bootstrapper находятся в и все работает ... но делает '$ interval (showem, 0) 'в контроллере работает. Добавьте его в качестве ответа, и я соглашусь с этим. –

+0

Ну, это не изящный хак, он попытается вникнуть в него, прежде чем отправлять ответ, чтобы попытаться найти лучший способ. –

ответ

-1

Попробуйте это,

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

Нет, я хочу, чтобы div .event внутри .countdown содержали divs, а не все из них, и все, что может быть классифицированным событием. –

0

Является ли это работает? Вы забыли ,

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

$ ("интро, .demo") Все элементы с классом "интро" или "DEMO"

см w3schools

+0

Да, это работает, я хочу div .event внутри .countdown, содержащего div. –

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}'> 

Здесь вы можете заметить, это должно иметь некоторое truthy условие, которое нужно добавить еще он не должен.

+0

Изначально все элементы скрыты. Как только я обновил контент, я хочу показать им все. Мне нужно сделать это, поскольку я не знаю, сколько таймеров у меня есть в точке написания HTML (это в коде javascript), поэтому «Hello» будет заменен на col-sm- (12/n) –

0

Контроллер:

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"> 
... 
0

Вам просто нужно подождать, пока не будут загружены все элементы.

Один из способов оборачивает его $(document).ready() вне кода контроллера:

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

Однако, имейте в виду, что если вы измените состояние без полной перезагрузки страницы, код не будет работать снова. В таком случае вам нужно обработать событие изменения состояния и добавить туда код.

Смежные вопросы