MDB sideNAV 按钮在添加 jQuery 时不起作用

Question

我正在启动 angular 带有 MDB 的 js 应用程序我已将 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- 第二次加载到 modaloverlays，第三次加载 3 个叠加层，所以在外部单击以隐藏 sidenav，只有一个叠加层消失，而其他叠加层保留在那里。

Answer 1

在 document ready 添加 jQuery 事件处理程序的代码经常失败的原因是 AngularJS 框架尚未将元素添加到 DOM。 AngularJS 指令，例如 ng-view、ng-repeat、ng-include、ng-when、ng-if 等，在期间添加和删除 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>

一定要在加载angular.js.

之前加载jQuery库
有关详细信息，请参阅

AngularJS Developer Guide - Creating Custom Directives

MDB sideNAV 按钮在添加 jQuery 时不起作用

MDB sideNAV button not working when added with jQuery

jquery

ms-access

angularjs

sidenav

用法