javascript - 在 AngularJS 组件的 Controller 内实现 getInstance(elem)

Question

我正在尝试使用 Materialize 的 .open() 方法在页面加载时打开 AngularJS 中的模式组件。

所以我的组件文件(loginModal.js)具有以下代码:

angular.module('my-app').component('loginModal', {
    templateUrl:'app/components/templates/loginModal.html',
    controller: loginModalController
})


function loginModalController()
{
    angular.element(document).ready( function(){

        var loginModal = document.querySelectorAll('.modal');
        var loginModal_options = {};
        var loginModal_instance = M.Modal.init( loginModal, loginModal_options);

        console.log(loginModal_instance);
        loginModal_instance.open();

        var instance = M.Modal.getInstance(loginModal);
        instance.open();


    });
}

虽然当我尝试触发 open 方法时初始化按预期进行，但通过我得到的 loginModal_instance 变量

loginModal_instance.open is not a function

通过 instance 变量我得到

Cannot read property 'open' of undefined

相反，如果我要使用 JQuery，它就可以工作

function loginModalController()
{    
    $(document).ready(function(){
          $('.modal').modal();
          $('#login-modal').modal('open');
    });
}

有什么想法吗？我做错了什么吗？

Answer 1

实际上，通过使用 querySelector() 而不是 querySelectorAll() 就可以达到目的。