Create HTML element in controller and splice it in text on the scope

Question

I have some text on the scope with tags like this [cid:ce743cbf-8c44-4c84-aa72-6d2c9eb4b81a] This is generated from an email with some inline content.

I need to go through the text and replace the tags with actual links to those resources. Like this:

<a target="_self" href="/api/attachment/ce743cbf-8c44-4c84-aa72-6d2c9eb4b81a">Name</a>

I am OK now with the replacement part but having trouble creating the actual element with angular.element.

It all works with pure javascript in this snippet from replacement function:

var link = document.createElement("a");
    link.innerText = name;
    link.setAttribute("href", url);
    link.setAttribute("target", "_self");
    return link.outerHTML;

outerHTML refuses to work in Firefox for some reason. How can I do it with angular.element?

Thanks

UPDATE

At the moment, I can solve the problem with simple string concatenation loke so:

return "<a target=\"_self\" href=" + url + ">" + name + "</a>";

That's the only thing that works with both Firefox and Chrome. But this option just does not feel like the right solution.

UPDATE

OK. I got it working with the help of Robs answer.

var link = angular.element("<a/>", {target: "_self", href: url, text: name});
return angular.element(link).wrap('<div>').parent().html();

This works perfectly with both browsers.

score 1 · Accepted Answer · edited May 23 '17 at 12:20

1

Try:

return angular.element(link).wrap('<div>').parent().html();

(Inspired by https://stackoverflow.com/a/4741203/1358376)

edited May 23 '17 at 12:20

Community

1
1

answered Jan 14 '15 at 10:46

Rob

5,353
33
34

Thank you. That's the kind of thing I was after. But unfortunately it does not work in Firefox. Works perfectly in Chromium but not in Firefox 34.0.5 on Linux. – r.sendecky Jan 15 '15 at 00:07
OK. I got it working. I does not work if the `link` is created and set with pure javascript functions (`createElement`, `setAttribute`) but it does work if I create the element with jquery in the first place. – r.sendecky Jan 15 '15 at 00:44

score 0 · Answer 2 · answered Jan 14 '15 at 08:38

0

So if i understand it correctly, you have a text in wich there is a link, and you would like to adjust that link using Jquery, than you could use: $("element").whatToDoWithIt
that would work and if you create an element and you dont put in in the body it wont have an outerHTML

answered Jan 14 '15 at 08:38

Joris Janssen

64
1
10

No, the text just has a tag in brackets as shown in my post. The tags need to be replaced with HTML links. So I need to create the actual HTML element and then insert it in place of tag. I can create the element as shown above but it does not work in firefox. How can I do the same with `angular.element`? Sorry if my explanation is not clear. – r.sendecky Jan 14 '15 at 08:48

Create HTML element in controller and splice it in text on the scope

2 Answers2