如何停止由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！