javascript - 解析 Angular Directive(指令)中的范围变量

Question

我正在创建一个 Angular Directive(指令)(元素)，它将对其中的文本应用一些转换。

这是指令:

module.directive('myDir', function() {
    return {
      restrict: 'E',
      link: function(scope, elem, attrs) {
        console.log(elem.text());       
      },
    };
  });

现在我刚刚在其中放置了一个 console.log 以确保我看到了预期的文本。

如果我的 html 是这样的，它会按预期工作:

<my-dir>Hello World!</my-dir>

但是，如果我使用范围内的变量，如下所示:

<my-dir>{{myMessage}}</my-dir>

这就是我在控制台输出中看到的文本，而不是变量值。我想我明白为什么输出是这样的，但是我不确定如何获得正确的值。要求是指令应该能够转换两个示例中的文本。

想法？

Answer 1

使用$interpolate将字符串转换为函数的服务，并将范围作为参数应用以获取值( fiddle ):

module.directive('myDir', function($interpolate) {
    return {
      restrict: 'E',
      link: function(scope, elem, attrs) {
        console.log($interpolate(elem.text())(scope));
      },
    };
  });