Question

我正致力于创建一个角度指令（元素），该指令将对其中的文本应用一些转换。

这是指令：

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服务来评估插值内容。

<强>代码

link: function(scope, elem, attrs) {
    console.log($interpolate(elem.text())(scope));
},

不要忘记添加$interpolate作为指令函数的依赖。

Answer 2

查看$ compile或http://odetocode.com/blogs/scott/archive/2014/05/07/using-compile-in-angular.aspx

这应该有效：

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

Answer 3

我建议你在指令上使用一个独立的范围，它可以让你访问这个值，而不必从dom中获取它。您还可以在链接函数中直接操作它作为范围的一部分

<my-dir my-message="myMessage"></my-dir>

JS

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

在angular指令中解析范围变量

3 个答案: