javascript – Angular:有选择地编译模板

我知道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,即使它已存在.但是,是否存在任何允许像我所表达的模板方法的方法?

为了更加彻底,我的理想解决方案不会处理任何Angular,直到找到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>

会导致:

{{n+2}}

3

4

5

最佳答案
自定义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

转载注明原文:javascript – Angular:有选择地编译模板 - 代码日志