В директиве angularjs я хочу найти идентификатор в HTML и добавить к нему класс

Question

У меня есть 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");
        }
    }
}])

Буду рад, если вы поможете мне написать правильный код длянайдите и добавьте класс.

Answer 1

В платформе 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 Справочник .

Answer 2

Если вы также не загрузили JQuery в свой проект, element.find('#collapse1') не будет работать, потому что JQLite не может найти по идентификаторам, потому что ограничен именем тега .

Однако,Вы можете захватить свой элемент с помощью функции DOM и обернуть его в элемент AngularJS.

angular.element(document.getElementById('collapse1')).addClass("panel-collapse collapse in");

PS Ответ georgeawg является предпочтительным подходом, но он предполагает, что у вас есть контроль над этим HTML, чтобы добавить ng-classпоэтому я представил альтернативный ответ.

Answer 3

Вы можете использовать

element[0].getElementById("collapse1").addClass("panel-collapse collapse in");

или

document.getElementById("collapse1").addClass("panel-collapse collapse in");