重新加载时显示的角度模态？

Question

我有这个模态，我在Node Red中工作。在传入的有效负载上，它应显示

它正在工作，但是在加载或重新加载页面时，将出现模式，何时不应该出现？

我认为它与scope.watch函数有关，但似乎无法确定它。

有帮助吗？ thx：-）

<!-- The Modal -->
<div id="myModal" class="modal">



  <!-- Modal content -->
  <div class="modal-content">
    <div class="modal-header">
      <span class="close">&times;</span>
      <h2>{{msg.payload.navn}}</h2>
    </div>
    <div class=imgbox style="height: 200px; width: 300px" >

     <img src="{{msg.payload.icon}}" style="width: 100%;max-height: 100%" >
</div>
    <div class="modal-body">
    <p>Glasstørrelse: {{msg.payload.glas}}ml </p> 
    <p>{{msg.payload.description}} </p>  
      <p>Instruktioner: {{msg.payload.description2}}</p>
      <div>

  <input type="number" ng-model="msg.payload.nummer" name="quantity" min="0" max="1000" style= "display: none;">
  <md-button class="bt1" ng-click="send(msg)">Bestil</md-button>
</div>
    </div>

  </div>

</div>

// Get the modal
var modal = document.getElementById('myModal');

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];

//show modal on msg.payload
(function(scope) {
  scope.$watch('msg', function(msg) {
    if (msg.payload) {
     modal.style.display = "block"}
  });
})(scope);

// When the user clicks on <span> (x), close the modal
span.onclick = function() {
    modal.style.display = "none";
}

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
    if (event.target == modal) {
        modal.style.display = "none";
    }
}

Answer 1

听起来像FOUC (Flash Of Unstyled Content)。在页面加载期间，Angular.js应用尚未应用其规则/样式，因此它是可见的DOM元素。 Angular.js处理此问题的方法是实现使用ngCloak隐藏该内容，直到需要为止。

您可能想要：

1. 在您的ngCloak（1）中包括my-cloak类的css（和朋友）
2. 将index.html的属性或css类应用于您受影响的元素

要更进一步，您可以考虑使用此方法在页面加载期间屏蔽整个Angular.js应用。许多应用程序都包含加载消息/屏幕，该消息/屏幕会在应用程序自身完成引导之前出现。

（（1）：

no-cloak