Question

我正在使用：empty和：blank，它们工作正常，但是我有一个案例，其中angular是在div中注入注释，而那些将不再起作用，在这种情况下我能做些什么：空和：空白会与评论一起使用吗？

Answer 1

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

EDITED

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

＆＃13;

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();
    }
  })
;

＆＃13;

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

＆＃13;

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

＆＃13;

css：empty，：空白，里面有注释

1 个答案:

EDITED