[英]How to stop anchors, added by a jquery plugin, from redirecting in angular?
My client insists on me using a jQuery plugin I have purchased from CodeCanyon called "Social Wall Stream". 我的客户坚持要求我使用从CodeCanyon购买的名为“ Social Wall Stream”的jQuery插件。 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: 为了包括这个插件,我已经加载了所有必需的文件(在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
});
}
});
Then on the page I want to display the social wall I have added the following html tag to the template: 然后在页面上我想显示社交墙,我在模板中添加了以下html标签:
<social-wall></social-wall>
The plugin renders the social wall like expected and besides the css conflicts with bootstrap it looks good. 该插件可以像预期的那样渲染社交墙,除了与引导程序的CSS冲突外,它看起来还不错。
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). 现在,当我单击过滤器(facebook,twitter等的锚点。所有已激活的社交媒体网站)而不是过滤同位素布局时,它会将用户重定向到锚点的网址(即“ #filter”,该网址会重定向回到我的主页,因为它不存在)。
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. 这段代码看起来像是要停止重定向(返回false),但是由于angular的路由,从未触发过$(window).load()。
I am using Angular-UI-Router btw, maybe that's relevant. 我正在使用Angular-UI-Router btw,也许这是相关的。
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: 我试过的
This worked, the directive was fired when the social wall was loaded, but the click event never fired. 这样做有效,在加载社交墙时触发了该指令,但是click事件从未触发。
But these directives never fired, probably something to do with the $compile function. 但是这些指令从未执行过,可能与$ compile函数有关。 Don't know angular throughout yet. 到目前为止还不了解角度。 But I know angular is not processing the elements that are being added by the plugin. 但是我知道angular不会处理插件添加的元素。
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 提前致谢
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. 我编辑了插件的核心,并从插件注入的锚点中删除了href =“#target”属性。 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: 然后在css中,将以下样式添加到锚点和其中的img中:
cursor: pointer;
to make it look like it did when it had a href. 使其具有href时的外观。
So now it doesn't redirect anymore and filters the isotope layout like I wanted. 因此,现在它不再重定向,并且可以像我想要的那样过滤同位素布局。
Thanks for the reply Arun P Johny! 感谢您的答复Arun P Johny!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.