Angular getElementById() 在 switch 语句中返回 null答案

【问题标题】：Angular getElementById() returns null in switch statementAngular getElementById() 在 switch 语句中返回 null
【发布时间】：2017-07-11 12:42:12
【问题描述】：

我有一个单页应用程序，其中“页面”正在使用 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'。有人可以帮我解释一下为什么它会以这种方式运行，我该如何解决这个问题？

感谢您的回答！

【问题讨论】：

试试 angular.element($document).find('myModal');你需要注入 $document ofc。

标签： javascript angularjs twitter-bootstrap

【解决方案1】：

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

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

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

考虑到单击事件，请务必在您的控制器被销毁时取消注册该事件。

【讨论】：

太棒了！很高兴它有帮助。