Why are ng-click events being stripped out of my data?


#1

I’m modifying my api to return ng-click events within the url, so instead of returning

<a href="http://www.google.com">Googe</a>

I’m returning

<a href="#" ng-click="myfunction('http://www.google.com')">Google</a>

However within my view, it’s removing ng-click!! and giving me

<a href="#">Google</a>

What is going on and how do i stop it from doing that.


#2

I’m guessing you’re using ng-bind-html and that strips out ng-click, right?

Check out this post I wrote:


#3

Ahh good call.

I’m not the strongest on directives and can’t quite get how to replace compile="http://www.google.com" with the ng-click i want.

.directive('compile', function(){
function getmyurl(scope, element, attrs){
  return "myfunction('scope.compile')";
}
return{
  restrict: 'A',
    scope:{
      'compile' : '='
    },
    link: getmyurl
  };
}

I may be completely off base :\


#4

I’m not able to get custom attributes to show up using ng-bind-html. :frowning:

How can I modify the bind-html within angular/ionic to allow ng-click? That would really be my best option regardless of the potential (no potential) for nefarious deeds by the source.


#5

If you installed the compile directive, then use <p compile="whatever_variable"> instead of <p ng-bind-html="'{{whatever_variable}}'">


#6

I think you guys probably already solved this, but for the benefit of anyone else that was looking at this thread, I wrote a filter that calls inline javascript on the url of a link. It’s not using angular, but IMO its easier than writing a whole custom directive just to modify your link.

myApp.filter('hrefToJS', function ($sce, $sanitize) {
    return function (text) {
        var regex = /href="([\S]+)"/g;
        var newString = $sanitize(text).replace(regex, "onClick=\"window.open('$1', '_blank', 'location=yes')\"");
        return $sce.trustAsHtml(newString);
    }
});

JS fiddle:
http://jsfiddle.net/sxcjmoj5/3/

Gist with more integration detail: