无法使用 querySelector/getElementById 获取 md-dialog 的子元素

Question

How can I get the child element of <md-dialog> using the element's id?

Here are the following workaround I did:

console.log(document.getElementById('input-file-upload')); // returns null
console.log(document.querySelector('#input-file-upload')); // returns null

But it returns null please see this demo

Answer 1

You need to wait until the modal is open. If you put your code inside a $timeout it works.

$timeout(function(){
    // HERE is the Problem i cannot get input file element by queryselector/getElementById
    console.log(document.getElementById('input-file-upload')) // returns null
    console.log(document.querySelector('#input-file-upload')) // returns null
});

Alternatively, you can use the onComplete property of $mdDialog.