Кнопка MDB sideNAV не работает при добавлении с jQuery

Question

Я запускаю angular js приложение с MDB. Я поместил обработчик sideNav в html, как показано ниже

<div class="float-left">
    <a href="#" data-activates="slide-out" ng-click="navCollapse()"
       class="button-collapse white-text"><i class="fas fa-bars"></i>
    </a>
</div>

в js коде. Я пытался поместить evenHandler внутри $().ready() и также в onDeviceReady

$(function(){
    //NOT WORKING
    $(".button-collapse").sideNav();

});

function domLoaded(){
    document.addEventListener("deviceready", onDeviceReady, false);
}

function onDeviceReady(){
    //NOT WORKING
    //$(".button-collapse").sideNav();
}

, затем я попробовал ng-click (), как показано ниже

$scope.navCollapse = function(){
    $(".button-collapse").sideNav();
}

, теперь он работает, но с ошибками
1 - сначала не работает нажмите
2- во второй раз, чтобы загрузить модальные оверлеи, при третьем времени загрузить 3 оверлея, поэтому при щелчке снаружи, чтобы скрыть sidenav, исчезнет только один оверлей, в то время как другие оверлеи останутся там.

Answer 1

Причина, по которой код, добавляющий обработчики событий jQuery на документ готов , часто приводит к сбою в том, что инфраструктура AngularJS еще не добавила элементы в DOM. AngularJS директивы, такие как ng-view, ng-repeat, ng-include, ng-when, ng-if и др. c. добавлять и удалять элементы DOM в течение срока службы приложения. Если инфраструктура еще не добавила эти элементы в готовом документе, код jQuery не найдет эти элементы.

Чтобы убедиться, что код выполняется, когда инфраструктура AngularJS добавляет элемент в DOM, добавьте его как директиву:

app.directive("sideNavDirective", function() {
    return {
        link: postLink
    };
    function postLink(scope, elem, attrs) {
        elem.sideNav();
    }
})

Использование

<div class="float-left">
    <a href="#" data-activates="slide-out" side-nav-directive
       class="button-collapse white-text"><i class="fas fa-bars"></i>
    </a>
</div>

Обязательно загрузите библиотеку jQuery до загрузка angular.js.

Для получения дополнительной информации см.

• AngularJS Руководство разработчика - Создание пользовательских директив