css :empty, :blank 里面有注释

Question

我正在使用 :empty 和 :blank，它们工作正常，但我有一个案例，其中 angular 在 div 中注入 cmets，这些将不再起作用，在这种情况下我可以做些什么，所以 :empty 和 :空白可以与 cmets 一起使用吗？

Answer 1

你可以做的事情很少......尝试看看：https://docs.angularjs.org/guide/production关注$compileProvider.debugInfoEnabled(false);......

通常不是一个好主意使用:empty（或其他东西）伪选择器来选择空元素因为选择器对所有内容都很敏感，包括空格。 有一个例子：

div {
  width: 30px;
  height: 30px;
  background: cyan;
  margin: 5px;
}

div:empty { display: none; }

<div>

</div>
<div> </div>

<!-- just this -->
<div></div>

已编辑

一种可能的解决方法是创建一个自定义指令来为您执行此操作，但是，当然，它应该手动添加到您想知道它们是否为空的元素中。这是一个例子：

angular
  .module('test', [])
  .directive('emptyClass', function() {
    return function postLink(iScope, iElement, iAttrs) {
      
      function updateOnChanges() {
        var classname = iAttrs.emptyClass;
        
        var hasContent = iElement.children().length > 0 ||
            iElement.text().trim().length > 0;
        
        if(hasContent) {
          return iElement.removeClass(classname);
        }
        
        return iElement.addClass(classname);
      }
      
      iElement[0].addEventListener(
        "DOMSubtreeModified", updateOnChanges, false
      );
      updateOnChanges();
    }
  })
;

.is-empty { background: cyan; display: block; min-height: 20px; margin: 10px; }

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<section ng-app="test">
  <h1 empty-class="is-empty">  </h1>
  <h1 empty-class="is-empty"></h1>

  <h1 empty-class="is-empty">
    <!-- ng-if: "oh Yeah" -->
  </h1>
  
  <h1 empty-class="is-empty"> Hello World </h1>
  <h1 empty-class="is-empty"><span>Hello World</span></h1>
</section>