0

I am trying to catch all anchor clicks and play with href's. so i have written below directive 

app.directive('a', function() {
        return {
            restrict: 'E',
            link: function(scope, elem, attrs) {
                if(attrs.ngClick || attrs.href === '' || attrs.href === '#'){
                    elem.on('click', function(e){
                        alert(attrs.href);
                        e.preventDefault();
                    });
                }
            }
        };
    })

i have tried giving this in my app.js as well as in MyCtrl.js files. where my module declartion is this way in myCtrl.js:

var AppControllers = angular.module('starter.controllers');
AppControllers

Its working in another ionic project. Not sure where i am going wrong. can someone help me?

georgeawg
  • 48,608
  • 13
  • 72
  • 95
praveen seela
  • 538
  • 11
  • 24

1 Answers1

0

Updated answer after reading comments

You can override the a directive. But you have to make sure that you override default behaviour to prevent angularjs overridden anchor tab click handler from firing.

app.directive('a', function() {
  return {
    restrict: 'E',
    scope: true,
    compile: function(element, attr) {
      element.bind('click', function(event) {
        alert('clicked on link: ' + attr.href)
        event.preventDefault(); // IMPORTANT
      });
    }
  }
});

Also when trying to bind to html, you might wanna make sure you compile it to make sure your anchor tag directive kicks in. There is a directive that can do it for you:

app.directive('bindHtmlCompile', ['$compile', function($compile) {
  return {
    restrict: 'A',
    link: function(scope, element, attrs) {
      scope.$watch(function() {
        return scope.$eval(attrs.bindHtmlCompile);
      }, function(value) {
        element.html(value);
        $compile(element.contents())(scope);
      });
    }
  };
}]);

Source: https://stackoverflow.com/a/29994559/841804

So, instead of ng-bind-html, you can use bind-html-compile like so: 

<span bind-html-compile="getHtml()"></span>

And finally, here's a plunker that does just that: http://plnkr.co/edit/efJw8f40gYIaXo5Bdv44?p=preview

Community
  • 1
  • 1
Chanthu
  • 1,794
  • 1
  • 15
  • 22
  • correct, but i am having several controllers. so i have placed my controllers into different files, so i am not passing dependencies and trying to use same object. i have placed the directive in my first controller file. even that didnt helped. any idea where to place my directive? – praveen seela Feb 06 '16 at 10:46
  • Then it would be very difficult to figure out exactly what's going on. How about a quick plunker? – Chanthu Feb 06 '16 at 10:47
  • i am trying to do the same with jQlite. by detecting anchor click in my class miniorPara nested. trying to use queryselector. will that work? any idea? – praveen seela Feb 06 '16 at 10:50
  • even created a module for directives(updated in plnkr). still no luck. not understanding how to. what i wanted to do is, i will receive a html which i dont have control of. when an anhor clicked, based on url type i need to open or download. so i am trying above ways. any help will be appreciated – praveen seela Feb 06 '16 at 13:09
  • Well, that plunker has the wrong version of angular loaded (should be 1, not 2), doesn't have ionic or ui-router added. You've created a module called 'starter.modules' but haven't used `ng-app="'starter.modules'"` in the html to load the module. Try doing those and see if that fixes the issue in plunker at least – Chanthu Feb 06 '16 at 13:44
  • as i said i have many modules so i couldnt mention all. i have a starter app and starter.modules added in app.js. – praveen seela Feb 06 '16 at 13:51
  • i have made a plunk http://plnkr.co/edit/5AZgI5o98dIUPXKDtlXw?p=preview. can anybody help me? i want to detect my anchor click. – praveen seela Feb 07 '16 at 10:18
  • @praveenseela http://stackoverflow.com/questions/14939385/href-overrides-ng-click-in-angular-js – Chanthu Feb 07 '16 at 12:59