AngularJS: directive with HTML and angular expressions, "compile" the contents with the outer scope

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!

The transclude callback has access to the scope on the link function. Why not use just that scope instead of outerScope.? I think that outerScope maybe is not what you expect it to be — Raulucco
– Raulucco, Commented Mar 31, 2015 at 9:33
I just added a jsfiddle. I also tried using the scope in the link function but it's not working either. — PX Developer
– PX Developer, Commented Mar 31, 2015 at 9:52

eladcon · Accepted Answer · 2015-03-31 10:46:34Z

1

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

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

answered Mar 31, 2015 at 10:46

eladcon

5,8251 gold badge18 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

PX Developer Over a year ago

It works great! I tried $compile, $parse, $eval, ... but I didn't find this one. Thank you, this is what I was looking for!

Nikos Paraskevopoulos · Accepted Answer · 2015-03-31 09:33:36Z

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, e.g.:

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/

Hi Nikos, the problem I'm facing is that in the 'processTemplateText' function you are receiving the text like: "{{whatever}} and <img src="XXX" style="background-color:blue"> more". I need to get the text: "WhatEVER!! and <img src="XXX" style="background-color:blue"> more".

Collectives™ on Stack Overflow

AngularJS: directive with HTML and angular expressions, "compile" the contents with the outer scope

2 Answers 2

1 Comment

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Related