javascript - AngularJS:带有 HTML 和 Angular 表达式的指令， "compile"具有外部范围的内容

Question

我是 AngularJS 的新手，如果我没有使用正确的单词来命名事物，我很抱歉。

我正在尝试实现一个可以接受任何类型文本(包括 HTML 标签和 Angular 表达式)的指令。此指令需要处理该文本并对其执行一些操作:例如，如果它在其中找到任何图像，则下载该图像并将原始 URL 替换为本地 URL。

我需要“编译”指令的内容，因为某些图像可能位于范围变量中 (ng-src="{ {任何}}”)。我不知道 scope 变量的名称。

我读过很多关于指令、transinclude、共享/隔离范围、$compile的内容> 等，但我无法让它发挥作用，而且我读得越多，我就越困惑。

我决定从一个简单的案例开始:一个获取简单 Angular 表达式的指令(请注意“无论”名称可以更改):

<format-text>{{whatever}}</format-text>

我想获取指令内“whatever”变量内的文本。我尝试了很多东西，但我无法让它发挥作用。这是我最新的测试:

angular.module('mymodule').directive('formatText', function($compile) {

     return {
        restrict: 'E',
        scope: true,
        transclude: true,
        link: function(scope, element, attrs, ctrl, transclude) {
            transclude(scope, function(clone, outerScope) {
                var template = '<span>'+clone.html()+'</span>';
                var compiled = $compile(template)(outerScope);
                console.log(compiled.html());
            });
        }
    };
});

该指令在控制台中写入以下内容:

{{whatever}}

我想获取变量的内容。变量“whatever”在范围中定义，并且在 View 中解析正常。

有人知道我怎样才能实现我想要做的事情吗？

编辑:我为它创建了一个jsfiddle，我不知道为什么“无论什么”内容没有写在HTML中，但是如果你查看控制台，你会看到在compileed.html()内部有 Angular 表达式未被替换。

http://jsfiddle.net/8ngcwxen/

谢谢!

Answer 1

您可以使用 $interpolate 服务获取该变量的内容:

var exp = $interpolate(clone.html());
var whatever = exp(scope);