Angular getElementById（）在switch语句中返回null

Question

我有一个页面应用程序，其中'网页'正在使用ng-switch进行切换。在第二页我有一个模式，我使用这种功能，打开它：

var modal = document.getElementById('myModal'); 
vm.openModal = function(src) { 
    modal.style.display = 'block'; 
    modalImg.src = src; 
}; 
modal.onclick = function() { 
    modal.style.display = 'none'; 
}; 

而且我的html：

<div ng-switch="vm.step.name"> 
    <div ng-switch-when="prepare"> 
     Some content of first page 
    </div> 
    <div ng-switch-when="action"> 
     Some content of second page 
     <button ng-click="vm.openModal('bootHP.jpg')">Open modal</button> 
     <!-- The Modal --> 
     <div id="myModal" class="modal-instruction absolute block"> 
     <img class="modal-content-guide centered" id="img01"> 
     </div> 
    </div> 
</div> 

的问题是，我得到VAR模式=零，所以对于某种原因它没有在开关中看到id ='myModal'。有人能帮助我澄清为什么这样表现，我该如何解决这个问题？

感谢您的回答！

Answer 1

如果您从控制器主体调用document.getElementById（即在构建控制器时执行它），那么ng-switch内的DOM很可能还不存在。

为了确定它是否存在，只有在执行openModal()时，才可以推迟获取它。

vm.openModal = function(src) { 
    var modal = angular.element('#myModal'); 
    modal.css('display', 'block'); 
    modalImg.src = src; 
}; 

考虑到单击事件，请确保在控制器被销毁时取消注册事件。