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

Question

我的HTML中有以下角度：

<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对象中没有任何一个＆＃34; opacity＆＃34;存在，所以问题不在那里。

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

这让我相信不知何故角度将div的不透明度设置为零，但我不知道这是怎么发生的。

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

Answer 1

您可能在某处设置了不透明度的样式规则。检查元素时，它应该告诉您从哪个元素获取样式。这个镜头说js：7，因为它从代码编辑器中获取样式。如果它来自样式表，它会说像site.css：7

＆＃13;

＆＃13;

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

＆＃13;

.table-wrapper{
    opacity:0;
  }

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;