Angular: Selectively compile templates

Question

I know that ng-non-bindable allows a given element and its children to be not compiled as a template. It seems it was designed to be peppered throughout a temp

Answer 1

Custom nonBindable directive

You will not be able to use ngNonBindable (well, you could decorate it) like this due to how directive is configured. However it's pretty easy to write custom directive with this behavior:

app.directive('nonBindable', function($compile) {
    return {
        terminal: true, 
        priority: 999,
        compile: function(tElement) {
            return function(scope) {
                var bindable = tElement[0].querySelectorAll('[bindable]');
                [].forEach.call(bindable, function(el) {
                    $compile(el)(scope);
                });    
            };
        }
    };
});

and use it like this:

    
{{2+2}}
    
{{2+2}}







    
{{n+2}}
    
{{n+2}}

Demo: http://plnkr.co/edit/NEDP4WkBN4TlXdXKo8WI?p=preview

Decorate ngNonBindable

You can decorate original ngNonBindable directive like this:

app.config(function($provide) {
    $provide.decorator('ngNonBindableDirective', function($delegate, $compile) {
        var directive = $delegate[0];
        directive.compile = function(tElement) {
            return function(scope) {
                var bindable = tElement[0].querySelectorAll('[bindable]');
                [].forEach.call(bindable, function(el) {
                    $compile(el)(scope);
                });
            };
        };
        return $delegate;
    });
});

and use it this way:

    
{{2+2}}
    
{{2+2}}







    
{{n+2}}
    
{{n+2}}

Demo: http://plnkr.co/edit/HVczVkkQR88hC7191ep0?p=preview