Chapter 10: Creating custom AngularJS comments

by msfrisbie

HTML

<script src="https://code.angularjs.org/1.3.2/angular.min.js"></script>
<div ng-app="myApp">
    <button ng-click="flags.purgeComments=true">Purge Comments!</button>
    <div x>
        <p>I am the outer comment</p>
        <p x>I am the inner comment</p>
    </div>
    <x>
        <div>
            <p>I am the outer comment</p>
            <x>
                <p>I am the inner comment</p>
            </x>
        </div>
    </x>
</div>

JavaScript

angular.module('myApp', [])
.directive('x', function() {
    return {
        restrict: 'AE',
        link: function(scope, el) {
            scope.$watch('flags.purgeComments', function(newVal) {
                if (newVal) {
                    el.remove();
                }
            });
        }
    };
});