AngularJS intercept links on dynamic content

Question

I know this is probably a non angular way of doing things but I can't think of a good way without having to rewrite a lot of how the content is laid out. This is also my first angular app and it's been a pleasure to learn the quirks.

Basically, I am writing a mobile version of a website that is radically different which didn't justify rewriting the website so it's dynamic. So we've decided to write an API that returns content from each of these pages in the form of HTML.

I have a working proof of concept written in Angular that does a $http request to grab the data, and that works perfectly. However, in each of these pages there could be one or many links, and those links need to be parsed and modified so the page calls the API instead of browsing there directly.

For example, an about us link could have the following mockup returned from the API (through $http.get().success():

<a href="http://localhost/about-us/">About Us</a>

The pages don't have an ID, we're working with a framework that doesn't have IDs for pages.

But I need to transform this over to, so Angular knows the load the page via an ajax get.

<a href="#" ng-click="loadPage('about-us')">About Us</a>

Is there a way of doing this?

Thank you !

How are you inserting the HTML retrieved with $http into your main page? — robertklep
– robertklep, Commented Jun 10, 2013 at 7:08
why not change it in the app which returns the modified html content — Abhishek Nandi
– Abhishek Nandi, Commented Jun 10, 2013 at 12:09
robertklep, it's assigned to the scope model and added using ng-bind-html-unsafe — Andrew H
– Andrew H, Commented Jun 11, 2013 at 14:35
Atrix1987, that would be one possibility. Wondering if it would be possible on the front end — Andrew H
– Andrew H, Commented Jun 11, 2013 at 14:36
If using ng-include is an option, you could create a directive which would intercept clicks on A elements: plunker (open console) — robertklep
– robertklep, Commented Jun 11, 2013 at 19:58

Derek Ekins · Accepted Answer · 2013-06-11 18:12:56Z

0

If you want it to work the angular way then you need to convert the html into an angular template. You can do this using the $compile service.

I had a crack at this you can view the result here.

It just uses some regex to find an hrefs, then replaces them with an ng-click. It then uses the compile service to turn it into an angular element and then adds it to the output.

It is not the most elegant of solutions but it does the trick. Probably in this situation I would just use a jQuery $('a').click() as there is no real value doing it in angular.

answered Jun 11, 2013 at 18:12

Derek Ekins

11.4k6 gold badges63 silver badges73 bronze badges

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

Collectives™ on Stack Overflow

AngularJS intercept links on dynamic content

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related