当添加jQuery时，MDB sideNAV按钮不工作

Question

我正在用MDB启动angular js应用程序我已经在html中放置了sideNav处理程序，如下

<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();
}

然后我试着点击((，如下

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

现在它工作了，但有错误
1-第一次点击时不工作
2-第二次加载到modaloverlay，第三次加载3个覆盖，所以点击外部隐藏侧导航，只有一个覆盖消失，而其他覆盖仍然存在。

Answer 1

在文档就绪时添加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开发人员指南-创建自定义指令