2014-08-30 15 views
0

我的客戶堅持使用我從CodeCanyon購買的名爲「Social Wall Stream」的jQuery插件。它使用同位素創建一個動態的互動式牆壁,來自幾個社交媒體網站的帖子。如何停止由jquery插件添加的錨定角度重定向?

要包含這個插件我已加載所需的全部文件(jQuery的&角後),並創建以下指令來加載它:

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等所有激活的社交媒體網站),而不是過濾同位素佈局,它將用戶重定向到錨點的網址(即「#過濾器」,由於它不存在,它被重定向回到我的主頁)。

該插件附帶下面的代碼,在加載到啓用同位素佈局和過濾器工具欄的核心插件之前應該包含該代碼。

/* 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),但$(窗口).load()是從來沒有發射,由於角度的路由。

我使用Angular-UI-Router btw,也許這是相關的。

所以我知道我需要找到一些解決方法,使上面的代碼角友好,但我不知道如何。

我的嘗試:

  • 創建等到社會牆已經被加載,然後查找該元素的指令,並使用了preventDefault發生添加click事件偵聽到它停靠重定向() 。

這工作,該指令被激發時,社會牆被加載,但點擊事件從未被解僱。

  • 創建停止重定向的指令(restrict:a)。然後將它添加到由jQuery插件添加的錨(編輯核心)。

但這些指令從未被觸發,可能是一些做的$編譯功能。現在還不知道角度。但是我知道angular並沒有處理插件添加的元素。

我希望我已經提供了足夠的信息,希望有人知道我可以如何解決這個問題。還是應該放棄並重寫整個代碼?不要以爲時間是值得的。

在此先感謝

+1

問題在於'click'處理程序不是用來處理動態元素的......你需要使用[event delegate](http://learn.jquery.com/events/event-delegation/)。 。'jQuery(document).on('click','.filter a',function(){})''而不是'jQuery('。filter a')。click(function(){})' – 2014-08-30 02:37:28

+0

對,我已經做出了你所建議的改變,現在點擊事件正在被解僱。唯一的問題;該鏈接不會被e.preventDefault()停止或返回false。它仍然重定向:S – 2014-08-30 13:16:50

回答

0

好吧,所以我找到了解決這個問題的方法。這不是我想要的,但它的工作原理,我只是隨它去。

我編輯了插件的核心,並從插件注入的錨中刪除了href =「#target」屬性。我添加了一個自定義類來聽。

然後在CSS中添加以下造型到錨&其中的IMG:

cursor: pointer; 

,以使它看起來像它沒有當它有一個HREF。

所以現在它不再重定向,並過濾像我想要的同位素佈局。

感謝您的回覆Arun P Johny!