0

我正在使用 MDB 启动 Angular 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- 第二次加载到模态叠加层，第三次加载 3 个叠加层，因此单击外部隐藏 sidenav 并且只有一个叠加层消失，而其他叠加层仍然存在。

4

1 回答 1

0

在文档就绪时添加 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>

一定要在加载之前加载jQuery 库angular.js。

有关详细信息，请参阅

于 2020-03-14T15:16:55.757 回答