AngularJS Example

HTML

<div ng-app="App">
    Click me:
    <input type="checkbox" ng-model="checked" ng-init="checked=true" />
    <br/>Show when checked:
    <div id="div1" ng-batch-if="checked">
        <div id="div2">ABC</div>
        <div id="div3">KLM</div>
        <div id="div4">PQR</div>
    </div>
</div>

CSS

div#div1 {
    border: 1px solid red;
}

div#div2 {
    border: 1px solid blue;
}

div#div3 {
    border: 1px solid blue;
}

div#div4 {
    border: 1px solid blue;
}

JavaScript

angular.module('App', [])

.directive('ngBatchIf', function() {
    return {
        scope: {},
        compile: function (elm, attrs) {
            // After flattening, Angular will still have the first element
            // bound to the old scope, so we create a temporary marker 
            // to store it
            elm.prepend('<div style="display: none"></div>');
            
            // Flatten (unwrap) the parent
            var children = elm.children();
            elm.replaceWith(children);
            
            // Add the ng-if to the children
            children.attr('ng-if', attrs.ngBatchIf);
            
            return {
                post: function postLink(scope, elm) {
                    // Now remove the temporary marker
                    elm.remove();
                }
            }
        }
    }
})

;