:empty 和 :blank 里面有注释

Question

我正在使用:empty和:blank。它们工作得很好，但我有一个例子，AngularJS 在 a 中注入注释div，而这些将不再工作。我可以做些什么来制作:empty和:blank处理评论吗？

Answer 1

您可以做一些事情...尝试看看：https://docs.angularjs.org/guide/product关注$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>