Angularjs - 社交媒体按钮不显示在部分中答案

【问题标题】：Angularjs - Social Media Buttons Don't Show Up in PartialsAngularjs - 社交媒体按钮不显示在部分中
【发布时间】：2013-01-17 19:31:50
【问题描述】：

我在我的 Angularjs 应用程序（facebook、twitter、google+）中使用了一些社交按钮。如果我在我的 index.html 主页面中包含这些按钮，它们就会显示得很好。但是，如果我将它们包含在部分中，然后导航到该部分，它们根本不会出现。为什么是这样？我正在使用 ng-view 包含 index.html 的部分内容。

这里是用于 fb、twitter 和 g+ 按钮的脚本，我应该包含在结束 body 标记的正上方。这存在于 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,s,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>

【问题讨论】：

你有什么代码可以给我们看吗？如果无法看到您正在尝试的内容，很难说出问题所在。
你的部分有<script>标签吗？如果是这样，请参阅stackoverflow.com/questions/14329554/…
在 Angular 之前包含 jQuery 吗？
是的，jQuery 包含在 Angular 之前
将 jquery 添加到我的部分顶部并将脚本从 index.html 移动到 share.html 的底部就可以了。谢谢大家！

标签： angularjs facebook twitter google-plus single-page-application

【解决方案1】：

正如 cmets 中所讨论的（但在此重复，因此该问题不会出现在“未回答”列表中）：确保 jQuery 已加载，并且在 Angular 之前加载。

“jqLite”（Angular 对 jQuery 功能子集的实现）无法处理 ng-include 部分中的 <script> 标签。如果加载了 jQuery（在 Angular 之前），那么 Angular 将使用 jQuery 而不是 jqLite。 jQuery 可以处理 ng-include 部分中的 <script> 标签。

【讨论】：