Angular: Selectively Compile Templates

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 template as needed. Is

Solution 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) {
            returnfunction(scope) {
                var bindable = tElement[0].querySelectorAll('[bindable]');
                [].forEach.call(bindable, function(el) {
                    $compile(el)(scope);
                });    
            };
        }
    };
});

and use it like this:

<divnon-bindable><div>{{2+2}}</div><divbindable>{{2+2}}</div></div><br><br><divnon-bindable><divng-repeat="n in [1,2,3]">{{n+2}}</div><divbindableng-repeat="n in [1,2,3]">{{n+2}}</div></div>

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) {
            returnfunction(scope) {
                var bindable = tElement[0].querySelectorAll('[bindable]');
                [].forEach.call(bindable, function(el) {
                    $compile(el)(scope);
                });
            };
        };
        return$delegate;
    });
});

and use it this way:

<divng-non-bindable><div>{{2+2}}</div><divbindable>{{2+2}}</div></div><br><br><divng-non-bindable><divng-repeat="n in [1,2,3]">{{n+2}}</div><divbindableng-repeat="n in [1,2,3]">{{n+2}}</div></div>

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