2

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 !

Andrew H
  • 225
  • 3
  • 9
  • How are you inserting the HTML retrieved with `$http` into your main page? – robertklep Jun 10 '13 at 07:08
  • why not change it in the app which returns the modified html content – Abhishek Nandi Jun 10 '13 at 12:09
  • robertklep, it's assigned to the scope model and added using ng-bind-html-unsafe – Andrew H Jun 11 '13 at 14:35
  • Atrix1987, that would be one possibility. Wondering if it would be possible on the front end – Andrew H Jun 11 '13 at 14:36
  • If using `ng-include` is an option, you could create a directive which would intercept clicks on `A` elements: [plunker](http://plnkr.co/edit/3OZ5gdCNKqlS5wC2o33c?p=preview) (open console) – robertklep Jun 11 '13 at 19:58
  • see my answer here: http://stackoverflow.com/questions/19267979/ng-click-not-working-from-dynamically-generated-html/25214909#25214909 – ricka Aug 09 '14 at 03:29

1 Answers1

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.

Derek Ekins
  • 11,215
  • 6
  • 61
  • 71