javascript - 为什么 ng-if 属性将其元素的不透明度设置为 0？

Question

我的 HTML 中有以下 Angular :

<div ng-controller="DocTableCtrl as docTableCtrl" ng-init='docTableCtrl.init()'>
    {{docTableCtrl.skuArr.length > 0}}
    <div class="table-wrapper" ng-if="docTableCtrl.skuArr.length > 0">
            made it in
    </div>
</div>

在 docTableCtrl 对象中的任何一点都不存在“不透明度”的任何实例，因此问题不在于此。

这是我遇到的问题。使用上面的代码，docTableCtrl.skuArr.length > 0 打印出 true，所以我知道 ng-if 应该显示该元素。此外，查看 DOM，table-wrapper 已正确显示在 DOM 上。但是，出于某种原因，在 style 属性中有一个 opacity: 0; 。我不知道这是从哪里来的。如果我从 table-wrapper div 中删除 ng-if，则不透明度不再设置为零，并且 made it in 在屏幕上可见。

这让我相信 angular 以某种方式将 div 的不透明度设置为零，但我不知道这是如何或为什么发生的。

为什么仅当 ng-if 出现在 table-wrapper div 上时才将不透明度设置为 0？

Answer 1

您可能在某处设置了不透明度的样式规则。当您检查一个元素时，它应该告诉您它从哪里获取样式。这张照片显示的是 js:7，因为它是从代码编辑器中获取样式的。如果它来自样式表，它会说类似 site.css:7

angular.module('MyApp',[]).
  controller('DocTableCtrl',[function(){
    var docTableCtrl = this;
    
    docTableCtrl.skuArr = [];
    
    docTableCtrl.enqueue = function(){
      docTableCtrl.skuArr.push(""); 
     }
    docTableCtrl.dequeue = function(){
      docTableCtrl.skuArr.pop();
    }
  
  }]);

.table-wrapper{
    opacity:0;
  }

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="MyApp">
<div ng-controller="DocTableCtrl as docTableCtrl" ng-init='docTableCtrl.init()'>
     {{docTableCtrl.skuArr.length}}
    {{docTableCtrl.skuArr.length > 0}}
    <div class="table-wrapper" ng-if="docTableCtrl.skuArr.length > 0">
            made it in
    </div>
  <button ng-click="docTableCtrl.enqueue('')">Enqueue</button>
  <button ng-click="docTableCtrl.dequeue()">Dequeue</button>
</div>
</div>