Ionic: Click event is not intercepting

Question

I have this directive to intercept link click:

var app = angular.module('mobApp.services');
app.directive('a', function() {
    return {
        restrict: 'E', // only Elements (<a>),
        link: function(scope, elm, attr) {
            elm.on('click', function($event) {
                $event.preventDefault()
                var href = attr.href;
                if(!!href && href !== '#') {
                    window.open(href, '_system', 'location=yes');
                }
                return false
            })
        }
    }
})

I have this element

<p ng-bind-html="post.details | linky:'_blank'" class="ng-binding">
   <a target="_blank" href="https://davidwalsh.name/speech-recognition" class="">
        https://davidwalsh.name/speech-recognition
   </a>
</p>

clicking on a is not firing the above directive code.

score 1 · Answer 1 · edited May 23 '17 at 12:01

1

It doesn't work because the html markup that you render via ng-bind-html has not been compiled by Angular in order to directives could work. So if you want to add directive to the document dynamically, you have to compile it. Here is an answer of how you can do that.

edited May 23 '17 at 12:01

Community

1
1

answered Feb 10 '17 at 05:21

GProst

9,229
3
25
47

how can i use `compile` directive with `ng-bind-html`? – Manish Kumar Feb 11 '17 at 03:57
You can't. Create a wrapper directive/component or controller, inside of which you will compile and append compiled html into existing DOM node via `html()` or `append()` method. – GProst Feb 11 '17 at 10:10
can you give example how to do that – Manish Kumar Feb 11 '17 at 10:23

Ionic: Click event is not intercepting

1 Answers1