提供带有表达式的模板作为指令的属性

Question

我想通过属性将“模板”传递给指令。这是我想要完成的一个老生常谈的例子：

这个 HTML：

<greeter person-name="Jim" greeting-template="Hello {{name}}"></greeter>

会产生输出：Hello Jim。

我试过这样的指令：

function greeter($interpolate) {
    var directive = {
        link: link,
        restrict: 'EA',
        template: '<div>{{evaluatedTemplate}}</div>'
    };
    return directive;

    function link(scope, element, attrs) {
        scope.name = attrs.personName;
        scope.evaluatedTemplate = $interpolate(attrs.greetingTemplate)(scope);
    }
}

但这不起作用，因为greeting-template 属性中的{{name}} 在到达指令链接函数之前会在父作用域中进行评估。

最终，我需要attrs.greetingTemplate 的值字面意思是一个字符串：'Hello {{name}}'。我想我可以用一些替代语法来做到这一点，比如将greeting-template 属性值设置为：“Hello [name]”并在插值之前将“[”转换为“{{”。但这感觉很乱。我也查看了嵌入，但是它根据 parent 范围评估指令的方式看起来可能会在我有多个问候语时引起问题。

Answer 1

您可以使用compile 函数而不是使用link 函数，该函数在任何到范围的链接发生之​​前运行，并通过模板元素（原始DOM 元素）以及它的未插值属性作为论据。我认为这就是您要在这里寻找的。​​p>

在compile 函数中，您可以将未插值的模板字符串存储在一个变量中以供以后在您的post-link 函数中使用（如果您使用link 而不是@987654329，则与link 函数相同@)，然后您可以将其绑定到您的范围。

所以你的指令看起来像这样，带有compile 属性而不是link 属性：

function greeter($interpolate) {
  var directive = {
    compile: compile,
    restrict: 'EA',
    scope: true,
    template: '<div>{{evaluatedTemplate}}</div>'
  };
  return directive;

  function compile(tElement, tAttrs) {

    // save the uninterpolated template for use in our post-link function
    var greetingTemplateUninterpolated = tAttrs.greetingTemplate;

    return {
      pre: function (scope, element, attrs) {},
      post: function (scope, element, attrs) {
        scope.name = attrs.personName;
        scope.evaluatedTemplate = $interpolate(greetingTemplateUninterpolated)(scope);
      }
    };
  }  
}

Here's a fiddle 显示它工作正常。

here's 是一篇非常好的文章，解释了 compile 和 link 的工作原理。