0

I have an angluar module. In that module I have a controller with a function. I need to execute that function in popup on href click.

As the popup content is not initially part of DOM or angular context, how can make a angular function to be executed by that generated code?

Here is what I try to code: codepen

app.controller('AppCtrl', ['$scope', 'myPopup', function($scope, myPopup) {
...
var infoWindow = new google.maps.InfoWindow({
  content: "<a href='#' onclick='myPopup.show();'>this is my link</a>"
});

To retain is that I don't try to make execute exactly this code, I just search a way to execute an angular service function from a generated "on-fly" html code (a dynamic popup content, in my case).

serge
  • 13,940
  • 35
  • 121
  • 205
  • you can create your own custom directives in angular. – neetesh Jul 21 '16 at 10:20
  • Possible duplicate of [Append html to an element in directive and make a local function to interact with it](http://stackoverflow.com/questions/21452706/append-html-to-an-element-in-directive-and-make-a-local-function-to-interact-wit) – setec Jul 21 '16 at 10:21
  • my question was rather how can I link that directives to a on-fly generated element? – serge Jul 21 '16 at 11:59

1 Answers1

1

First of all here's the working codepen: http://codepen.io/anon/pen/vKRWYy?editors=1010

So, the solution(just A solution. Not THE solution) is to add modal open function on window or global scope. And invoke that function on clicking the map.

window.showPopup = function(){
    myPopup.show();
};

<a href='#' onclick='showPopup();return false;'>this is my link</a>

On a side note, it's generally not good practice to use non angular code with angular. It might be worth looking at an angular google maps implementation like: http://angular-ui.github.io/angular-google-maps/#!/. Maybe?

Chanthu
  • 1,794
  • 1
  • 15
  • 22
  • While this answer helps the question author, I would't recommend posting answer with this solution because it's dirty workaround and should't be repeated by other people who may find this answer later. Why no post proper 'angularish' solution?. – setec Jul 21 '16 at 10:29
  • @setec The proper 'angularish' would be to use an angular wrapper around google maps library. Which i've posted a link to as well. – Chanthu Jul 21 '16 at 10:34
  • Thanks... But in fact, my question is not about maps at all... I would like to know rather how to link an angular functionality to a HTML code generated in a popup, so initially not in the DOM... – serge Jul 21 '16 at 11:58
  • Imagine the function uses other angular services, like `$http`... in that case is hard to use this solution... – serge Jul 21 '16 at 12:09
  • How about you post another example similar? – Chanthu Jul 21 '16 at 13:44