防止表达式属性编译，因此它在嵌套指令之间作为字符串传递

Question

我试图编写一个使用另一个指令（ child 指令）的指令（我称之为父指令）。我希望父指令委托包含表达式作为字符串的属性，因此child指令附加到右侧范围的表达式。

HTML

我的简化标记如下：

<my-select option-template = '{{name}}' />

这里要注意的重要一点是，{{name}}表达式将由具有正确范围的子指令使用，但{{name}}不在当前范围内（父节点，我的 - 选择指令）。因此，我希望my-select（父）指令只是将其视为字符串并将该字符串委托给子指令。

父指令

条带式父指令如下所示：

.directive('mySelect', function () {
    template: '<myOption option-template = "[X]" />'
}

[X]表示＆＃39;与给您的option-template属性相同的值;即，{{name}}。

子指令

然后在子指令上，应该发生类似的事情：{{name}}应被视为一个字符串，在链接期间将附加到正确的范围。

child指令看起来像这样：

.directive('myOption', function () {
    template: '<div>The name is: [Y]</div>'
}

其中[Y]表示option-template属性上的任何内容。

问题

我的主要问题是，一旦我在属性中引入和表达，编译器就会编译它，并且我无法将它作为字符串委托给子指令。

Answer 1

好的，经过很少的尝试，可以为template属性定义一个指令，如下所示：

cbUI.directive( 'optionTemplate', function( $compile ) {
    return {
        compile: function compile( tElement, tAttributes ) {

            // String-replace the {{optionTemplate}} string with the actual value
            // of the attribute provided.
            var iOptionTemplate = tAttributes.optionTemplate;           
            var iHTML = tElement.html();            
            iHTML = iHTML.replace('{{optionTemplate}}', iOptionTemplate );            
            tElement.html( iHTML );

            return function postLink( scope, element, attributes ) { };
        }        
    }
});

然后任何其他指令都可以正常使用模板，就像属性在范围内一样：

.directive('mySelect', function () {
    template: '<myOption option-template="{{optionTemplate}}" />'
}