javascript - 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 modal = null，因此由于某种原因它在 switch 中看不到 id='myModal'。有人可以帮我澄清为什么它会以这种方式运行吗？我该如何解决这个问题？

感谢您的回答!

Answer 1

如果您从 Controller 主体调用 document.getElementById (即在构造 Controller 时执行)，则 ng-switch 内的 DOM 很可能不会还不存在。

为了确定它存在，您可以推迟仅在执行 openModal() 时获取它。

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

考虑到点击事件，请确保在 Controller 被销毁时注销该事件。