В директиве angularjs я хочу найти идентификатор в HTML и добавить к нему класс
У меня есть HTML-код с идентификатором "# collapse1", где числовые значения генерируются динамически. Я хочу найти этот конкретный идентификатор при загрузке страницы и добавить к нему класс.
Мой код директивы
app.directive('mainSidebar',
['$localStorage','$rootScope',function($localStorage,$rootScope){
return{
restrict : 'AEC',
transclude : true,
controller : 'SidebarController',
templateUrl : 'app/sidebar/sidebar.html',
link: function(scope, element, attrs) {
element.find('#collapse1').addClass("panel-collapse collapse in");
}
}
}])
Буду рад, если вы поможете мне написать правильный код, чтобы найти и добавить к нему класс.
Совершенно уверен, что так и должно быть: element[0].getElementById("collapse1").addClass("panel-collapse") также метод .addClass принимает один класс за раз, если я не ошибаюсь.
Можете ли вы включить шаблон своей директивы
@ Adriani6 нет правильного синтаксиса addClass. Он принимает более одного элемента, разделенных пробелом (api.jquery.com/addclass).
@amicoderozer Вы правы, но это больше не объект jQuery.
@ Adriani6 да, я тоже подозреваю, потому что синтаксис jQuery правильный
@amicoderozer Это одна из причин, по которой вы не должны использовать jQuery вместе с Anuglarjs, кроме очевидных проблем цикла дайджеста Angularjs после манипуляций с DOM.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 3
Ты можешь использовать
element[0].getElementById("collapse1").addClass("panel-collapse collapse in");
или же
document.getElementById("collapse1").addClass("panel-collapse collapse in");
Метод addClass - это метод jQuery. Необработанный элемент DOM необходимо преобразовать в элемент jQuery.
В фреймворке AngularJS используйте директиву ng-class для добавления и удаления классов:
<div id = "collapse" ng-class = "{'panel-collapse': addClass,
'collapse': addClass,
'in': addClass}" >
</div>
<button ng-click = "addClass = !addClass">
{{addClass ? 'Remove' : 'Add' }}
</button>
Для получения дополнительной информации см. Справочник по API директивы AngularJS ng-class.
Если вы также не загрузили JQuery в свой проект, element.find('#collapse1') не будет работать, потому что JQLite не может найти на основе идентификаторов, потому что это ограничено именем тега.
Однако вы можете захватить свой элемент с помощью функции DOM и обернуть его в элемент AngularJS.
angular.element(document.getElementById('collapse1')).addClass("panel-collapse collapse in");
P.S. Ответ georgeawg является предпочтительным подходом, но предполагается, что у вас есть контроль над этим HTML, чтобы добавить к нему ng-class, поэтому я отправил альтернативный ответ.
Какой элемент в функции
link? Объект jquery?