Angularjs – 社交媒体按钮不会显示在部分内容中
发布时间:2020-12-17 17:18:05 所属栏目:安全 来源:网络整理
导读:我在 Angularjs应用程序(facebook,twitter,google)中使用了一些社交按钮.如果我在我的主index.html页面中包含这些按钮,它们就会很好地显示出来.但是,如果我将它们包含在部分中然后导航到此部分,则它们根本不显示.为什么是这样?我使用ng-view包含部分内部ind
我在
Angularjs应用程序(facebook,twitter,google)中使用了一些社交按钮.如果我在我的主index.html页面中包含这些按钮,它们就会很好地显示出来.但是,如果我将它们包含在部分中然后导航到此部分,则它们根本不显示.为什么是这样?我使用ng-view包含部分内部index.html.
这是fb,twitter和amp;的脚本. g按钮我应该包括在关闭身体标签的正上方.它位于index.html中 <!-- Facebook --> <div id="fb-root"></div> <script>(function(d,s,id) { var js,fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=269163553107202"; fjs.parentNode.insertBefore(js,fjs); }(document,'script','facebook-jssdk'));</script> <!-- Google Plus - Place this tag after the last +1 button tag. --> <script type="text/javascript"> (function() { var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true; po.src = 'https://apis.google.com/js/plusone.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po,s); })(); </script> <!-- Pinterest --> <script type="text/javascript" src="//assets.pinterest.com/js/pinit.js"></script> 这些按钮本身就存在于我的share.html部分中. <li class="facebook"> <img src="/img/icon-facebook.png" alt="facebook"/> <div style="margin: 0 auto; display: block" class="fb-like" data-href="{{url}}" data-send="false" data-layout="button_count" data-width="450" data-show-faces="false"></div> </li> <li class="twitter"> <img src="/img/icon-twitter.png" alt="twitter"> <a style="width: 77px;" href="https://twitter.com/share" class="twitter-share-button" data-url="{{url}}" data-via="slowfoodnation" data-hashtags="">Tweet</a> <script>!function(d,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script> </li> <li class="google-plus"> <img src="/img/icon-google-plus.png" alt="google plus"/> <!-- Place this tag where you want the +1 button to render. --> <div class="g-plusone" data-size="medium" data-annotation="none" data-href="{{url}}" </div> </li> 解决方法
正如评论中所讨论的那样(但在此重复,因此这个问题没有出现在“未答复”列表中):确保加载jQuery,并在Angular之前加载它.
“jqLite”(Angular的jQuery功能子集的实现)无法处理< script> ng-include’d partials中的标签.如果加载了jQuery(在Angular之前),那么Angular将使用jQuery而不是jqLit??e. jQuery可以处理< script> ng-include’d partials中的标签. (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |