角：选择性编译模板 [英] Angular: Selectively compile templates

问题描述

我知道 NG-非绑定允许给定元素及其子将不编译为模板。它似乎它被设计为需要被整个模板穿插。有没有办法告诉角度不处理一个给定的元素，但万佛洞成，并允许选择的子元素进行处理？例如，我很想能够做这样的事：

 ＆LT; D​​IV NG-非绑定＆GT;
    ＆LT; D​​IV＆GT; {{2 + 2}}＆LT; / DIV＆GT;
    ＆LT; D​​IV NG-绑定＆GT; {{2 + 2}}＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
 

和有它的输出：

  

{{2 + 2}}

  
  

4

据我所知， NG-非绑定甚至不容许 NG-绑定来进行处理，即使如果它存在。但是否存在任何允许的方法对模板就像我前pressed？

要更彻底，我的理想的解决方案将不会处理任何角度，直到如发现 NG-绑定，不只是大括号前pressions。例如：

 ＆LT; D​​IV NG-非绑定＆GT;
    ＆LT; D​​IV NG重复=N在[1,2,3]＆GT; {{N + 2}}＆LT; / DIV＆GT;
    ＆LT; D​​IV NG-NG绑定重复=N在[1,2,3]＆GT; {{N + 2}}＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
 

将导致：

  

{{N + 2}}

  
  

3

  
  

4

  
  

5

解决方案

自定义 nonBindable 指令

您将无法使用 ngNonBindable （当然，你可以装饰它）像这样由于指令的配置方式。然而，它的pretty容易编写自定义的指令，这个行为：

  app.directive（'nonBindable'，函数（$编译）{
    返回{
        终端：真实，
        优先级：999，
        编译：功能（tElement）{
            复位功能（适用范围）{
                VAR可绑定= tElement [0] .querySelectorAll（[绑定]'）;
                [] .forEach.call（绑定，功能（EL）{
                    $编译（EL）（范围）;
                }）;
            };
        }
    };
}）;
 

和使用这样的：

 ＆LT;格非绑定＆GT;
    ＆LT; D​​IV＆GT; {{2 + 2}}＆LT; / DIV＆GT;
    ＆LT; D​​IV＆绑定GT; {{2 + 2}}＆LT; / DIV＆GT;
＆LT; / DIV＆GT;＆LT; BR＆GT;＆LT; BR＆GT;＆LT;格非绑定＆GT;
    ＆LT; D​​IV NG重复=N在[1,2,3]＆GT; {{N + 2}}＆LT; / DIV＆GT;
    ＆LT; D​​IV绑定NG重复=N在[1,2,3]＆GT; {{N + 2}}＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
 

演示： http://plnkr.co/编辑/ NEDP4WkBN4TlXdXKo8WI？p = preVIEW

装饰 ngNonBindable

您可以装饰原始的 ngNonBindable 指令是这样的：

 的app.config（函数（$提供）{
    $ provide.decorator（'ngNonBindableDirective'，函数（$代表，$编译）{
        变种指令= $代表[0];
        directive.compile =功能（tElement）{
            复位功能（适用范围）{
                VAR可绑定= tElement [0] .querySelectorAll（[绑定]'）;
                [] .forEach.call（绑定，功能（EL）{
                    $编译（EL）（范围）;
                }）;
            };
        };
        返回$代表;
    }）;
}）;
 

和使用这种方式：

 ＆LT; D​​IV NG-非绑定＆GT;
    ＆LT; D​​IV＆GT; {{2 + 2}}＆LT; / DIV＆GT;
    ＆LT; D​​IV＆绑定GT; {{2 + 2}}＆LT; / DIV＆GT;
＆LT; / DIV＆GT;＆LT; BR＆GT;＆LT; BR＆GT;＆LT; D​​IV NG-非绑定＆GT;
    ＆LT; D​​IV NG重复=N在[1,2,3]＆GT; {{N + 2}}＆LT; / DIV＆GT;
    ＆LT; D​​IV绑定NG重复=N在[1,2,3]＆GT; {{N + 2}}＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
 

演示： http://plnkr.co/编辑/ HVczVkkQR88hC7191ep0？p = preVIEW

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 there a way to tell Angular to not process a given element, BUT to "poke holes" into that and allow selected child elements to be processed? For example, I'd love to be able to do something like this:

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

And have it output:

{{2+2}}

4

I understand that ng-non-bindable wouldn't even allow ng-bindable to be processed, even if it existed. But does anything exist to allow an approach to templates like I've expressed?

To be more thorough, my ideal solution would not process anything Angular until if found the ng-bindable, not just the curly brace expressions. For example:

<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>

would result in:

{{n+2}}

3

4

5

解决方案

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:

<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>

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:

<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>

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

这篇关于角：选择性编译模板的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！