我的客戶堅持使用我從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並沒有處理插件添加的元素。
我希望我已經提供了足夠的信息,希望有人知道我可以如何解決這個問題。還是應該放棄並重寫整個代碼?不要以爲時間是值得的。
在此先感謝
問題在於'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
對,我已經做出了你所建議的改變,現在點擊事件正在被解僱。唯一的問題;該鏈接不會被e.preventDefault()停止或返回false。它仍然重定向:S – 2014-08-30 13:16:50