AngularJS：带有HTML和角度表达式的指令，使用外部范围“编译”内容

Question

I'm new to AngularJS , sorry if I don't use the correct words for naming things.

I'm trying to implement a directive that can accept any kind of text (including HTML tags and angular expressions ). This directive needs to treat that text and do some stuff with it: for example, if it finds any image inside of it, the image is downloaded and the original URL is replaced with the local URL.

I need to " compile " the contents of the directive since some images might be in scope variables (ng-src="{{whatever}}"). I cannot know the names of the scope variables.

I've read a lot of stuff about directives , transclude , shared/isolated scope , $compile , etc. but I can't make it work and the more I read the more confused I get.

I decided to start with a simple case: a directive that gets a simple angular expression (please notice that the 'whatever' name can change):

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

I want to get the text inside the 'whatever' variable inside of the directive. I tried a lot of things, but I can't get it to work. This is my latest test:

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());
            });
        }
    };
});

This directive writes the following in the console:

{{whatever}}

and I'd like to get the contents of the variable. The variable 'whatever' is defined in the scope and it's resolved ok in the view.

Anyone knows how can I achieve what I'm trying to do?

EDIT: I created a jsfiddle for it, I don't know why the 'whatever' contents aren't written in the HTML but if you look at the console you'll see that inside compiled.html() the angular expression isn't replaced.

http://jsfiddle.net/8ngcwxen/

Thank you!

Answer 1

You can get the content of that variable by using the $interpolate service:

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

Answer 2

In order to change the template of a directive before it is processed by Angular, you have to use the compile function. A simple case is to get the contents as text, empty the contents, run your transformation in the text and set the transformed text back, eg:

app.directive('formatText', function() {
    return {
        restrict: 'E',
        scope: false,
        compile: function(tElem, tAttrs) {
            var html = tElem.html();

            tElem.empty();

            tElem.html(processTemplateText(html));

            return function() {
            };
        }
    };
});

As demonstrated in this fiddle: http://jsfiddle.net/ur4uzrz3/