如何停止由jquery插件添加的锚点重定向到angular中？

Question

我的客户坚持要求我使用从CodeCanyon购买的名为“ Social Wall Stream”的jQuery插件。 它使用同位素创建动态互动墙，其中包含来自多个社交媒体网站的帖子。

为了包括这个插件，我已经加载了所有必需的文件（在jquery和angular之后），并创建了以下指令来加载它：

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
        });
    }
});

然后在页面上我想显示社交墙，我在模板中添加了以下html标签：

<social-wall></social-wall>

该插件可以像预期的那样渲染社交墙，除了与引导程序的CSS冲突外，它看起来还不错。

现在，当我单击过滤器（facebook，twitter等的锚点。所有已激活的社交媒体网站）而不是过滤同位素布局时，它会将用户重定向到锚点的网址（即“ #filter”，该网址会重定向回到我的主页，因为它不存在）。

该插件随附以下代码，在加载到启用同位素布局和过滤器工具栏的核心插件之前，应包含以下代码。

/* 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;
    });
});

这段代码看起来像是要停止重定向（返回false），但是由于angular的路由，从未触发过$（window）.load（）。

我正在使用Angular-UI-Router btw，也许这是相关的。

所以我知道我需要找到一些解决方法来使上述代码对角度友好，但是我不确定如何做到。

我试过的

• 创建一个指令，等待直到社交墙已加载，然后查找该元素，然后向其添加click事件监听器，这可以使用preventDefault（）阻止重定向发生。

这样做有效，在加载社交墙时触发了该指令，但是click事件从未触发。

• 创建一个停止重定向的指令（限制：a）。 然后将其添加到jQuery插件（已编辑核心）添加的锚点中。

但是这些指令从未执行过，可能与$ compile函数有关。 到目前为止还不了解角度。 但是我知道angular不会处理插件添加的元素。

我希望我已经提供了足够的信息，希望有人知道我该如何解决。 还是我应该放弃并重新编写整个代码？ 不过，不要认为时间值得。

提前致谢

Answer 1

好的，所以我找到了解决此问题的方法。 它不是我想要的，但是它可以工作，所以我就随它去。

我编辑了插件的核心，并从插件注入的锚点中删除了href =“＃target”属性。 并且我添加了一个自定义类来监听。

然后在css中，将以下样式添加到锚点和其中的img中：

cursor: pointer;

使其具有href时的外观。

因此，现在它不再重定向，并且可以像我想要的那样过滤同位素布局。

感谢您的答复Arun P Johny！