Nb. This question is similar to a related question which refers to compiling the content within a directive.
However, this example is slightly different, in the example this is targeted to, the qtip elements are related to cytoscape objects using the cytoscape-qtip plugin, not plain html elements. As such, I need a way to either compile the html from a controller/service, or refer to a directive from there.
Qtip allows you to have HTML as the text body of the qtip, which makes it ideal for creating onclick dialog menus, etc.
For example I can do this:
<body ng-controller = "MyController" ng-app="myApp" ng-class = "bodyStyle">
<a href ="" id = "foo" > Foo</a><br>
<a href ="" id = "bar" > Bar</a><br>
<a href ="" id = "biz"> Biz</a><br>
</body>
<script>
$('a').qtip(
{
content: {
text: '<button onclick = "console.log(\'foo\');">click me</button><br> foofoo',
title: {
text: 'My Qtip',
button: true
}
}
});
</script>
Where clicking on the Foo/Bar/Biz links will reveal the qtip, and then clicking the qtip's button will output to console.
What I would like to do is have this qtip bind to an angular controller. I can then access other services etc to carry out the correct ng-click functionality.
What's the most elegant way to do this?