How to stop anchors, added by a jquery plugin, from redirecting in angular?

Question

My client insists on me using a jQuery plugin I have purchased from CodeCanyon called "Social Wall Stream". It uses isotope to create a dynamic interactive wall with posts from several social media sites.

To include this plugin I have loaded all the required files (after jquery & angular) and created the following directive to load it:

angular.module('app').directive('socialWall', function($timeout){
    return {
        restrict: 'E',
        replace: true,
        link: function($scope, element, attrs){

        // Load the social stream plugin on our element
        angular.element(element).dcSocialStream({
            // irrelevant api configuration
        });
    }
});

Then on the page I want to display the social wall I have added the following html tag to the template:

<social-wall></social-wall>

The plugin renders the social wall like expected and besides the css conflicts with bootstrap it looks good.

Now when I click on a filter (anchor for facebook, twitter, etc.. all the activated social media sites) instead of filtering the isotope layout it redirects the user to the anchor's url (which is "#filter", which gets redirected back to my homepage since it does not exist).

The plugin comes with the following code which should be included before loading to core plugin which enables the isotope layout and the filter toolbar.

/* Isotope minified plugin code */

jQuery(window).load(function(){

    var filters = {}, $container = jQuery('.stream');

    jQuery('.filter a').click(function(){
        var $i = jQuery(this), isoFilters = [], prop, selector, $a = $i.parents('.dcsns-toolbar'), $b = $a.next(), $c = jQuery('.stream',$b);

        jQuery('.filter a',$a).removeClass('iso-active');
        $i.addClass('iso-active');
        filters[ $i.data('group') ] = $i.data('filter');
        for (prop in filters){
            isoFilters.push(filters[ prop ])
        }
        selector = isoFilters.join('');
        $c.isotope({filter: selector, sortBy : 'postDate'});
        return false;
    });
});

This code looks like it's intended to stop the redirect (return false) but the $(window).load() is never fired due to angular's routing.

I am using Angular-UI-Router btw, maybe that's relevant.

So I know I need to find some workaround to make the above code angular friendly but I'm not sure how.

What I tried:

• Create a directive that waits until the social wall has been loaded and then looks for the element and add a click event listener to it which stops the redirect from happening using preventDefault().

This worked, the directive was fired when the social wall was loaded, but the click event never fired.

• Create a directive that stops the redirect (restrict: a). Then add it to the anchors that are added by the jQuery plugin (edited the core).

But these directives never fired, probably something to do with the $compile function. Don't know angular throughout yet. But I know angular is not processing the elements that are being added by the plugin.

I hope I've given enough information and I hope someone knows how I can fix this. Or should I just give up and rewrite the entire code in angular? Don't think the time is worth it though.

Thanks in advance

Answer 1

Okay so I found a solution to this problem. It is not what I wanted but it works so I'll just go with it.

I edited the core of the plugin and removed the href="#target" attribute from the anchors that are being injected by the plugin. And I added a custom class to listen for.

Then in the css I added the following styling to the anchors & the img within it:

cursor: pointer;

to make it look like it did when it had a href.

So now it doesn't redirect anymore and filters the isotope layout like I wanted.

Thanks for the reply Arun P Johny!