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

Question

我正在使用：空和：空白，它们工作正常，但我有一个案例，其中角度是在div中注入注释，那些将不再工作，在这种情况下我可以做的事情是这样的：空和：空白将工作有评论？

Answer 1

There are few things that you can do... try to have a look at: https://docs.angularjs.org/guide/production paying attention to the $compileProvider.debugInfoEnabled(false); ...

Generally is not a good idea the use of :empty (or something else) pseudoselector with the goal of selecting empty elements because that selectors are sensible to everything, whitespace included. There is an example:

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

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

EDITED

a possible workaround could be creating a custom directive that does this for you, but, of course, it should be manually added to the elements where you want to know if they are empty or not. Here is an example:

 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>