Angular: выборочно компилировать шаблоны

Question

Я знаю это ng-non-bindable позволяет заданному элементу и его дочерним элементам не скомпилироваться как шаблон. Кажется, он был разработан так, чтобы его можно было вставлять в шаблон по мере необходимости. Есть ли способ сказать Angular не обрабатывать данный элемент, НО "прокалывать" в нем и разрешать обработку выбранных дочерних элементов? Например, я хотел бы иметь возможность сделать что-то вроде этого:

<div ng-non-bindable>
    <div>{{2+2}}</div>
    <div ng-bindable>{{2+2}}</div>
</div>

И иметь его вывод:

{{2 + 2}}

4

Я это понимаю ng-non-bindable даже не позволил бы ng-bindable обрабатываться, даже если бы он существовал. Но существует ли что-нибудь, чтобы позволить подход к шаблонам, как я выразил?

Чтобы быть более тщательным, мое идеальное решение не будет обрабатывать ничего угловатого, пока не найдет ng-bindable, а не только выражения фигурных скобок. Например:

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

приведет к:

{{П + 2}}

3

4

5

Answer 1

изготовленный на заказ nonBindable директива

Вы не сможете использовать ngNonBindable (ну, вы могли бы украсить его), как это из-за того, как настроена директива. Однако довольно легко написать пользовательскую директиву с таким поведением:

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);
                });    
            };
        }
    };
});

и используйте это так:

<div non-bindable>
    <div>{{2+2}}</div>
    <div bindable>{{2+2}}</div>
</div>

<br><br>

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

Демонстрация: http://plnkr.co/edit/NEDP4WkBN4TlXdXKo8WI?p=preview

декорировать ngNonBindable

Вы можете украсить оригинал ngNonBindable директива как это:

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;
    });
});

и используйте это так:

<div ng-non-bindable>
    <div>{{2+2}}</div>
    <div bindable>{{2+2}}</div>
</div>

<br><br>

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

Демоверсия: http://plnkr.co/edit/HVczVkkQR88hC7191ep0?p=preview