Question

我希望在AngularJS的文章列表中添加社交分享我已经实现了按下共享按钮的切换，但如果我单击其他文章上的共享按钮，我希望关闭此选项。

现在，当我点击.share-article时出现的每个共享选项都将保持打开状态（有效地允许页面上的混乱）。我只希望活动开放。

<span class="article-title">
  <a href="{{article.url}}">{{article.title}}</a>
</span>
<div class="click-items">
  <a ng-click="articles.removeArticle($index)" class="delete-article clickable" title="Remove article">
    <span>&#10006;</span>
  </a>
  <a ng-click="socialShare = !socialShare" class="share-article clickable">
    <span class="plus-sign" title="Share">&#10006;</span>
    <div social-share ng-show="socialShare" class="social-share arrow-down">
      <div ng-click="socialShare = !socialShare" class="addthis_toolbox addthis_default_style addthis_16x16_style" 
      addthis:title="{{article.title}}" addthis:description="{{article.extract}}" addthis:url="{{article.url}}">
        <a class="addthis_button_facebook"></a>
        <a class="addthis_button_twitter"></a>
        <a class="addthis_button_google_plusone_share"></a>
        <a class="addthis_button_reddit"></a>
        <a class="addthis_button_hackernews"></a>
        <script type="text/javascript">var addthis_config = {"data_track_addressbar":true};</script>
        <script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-529b989f77fb3475"></script>
      </div>
    </div>
  </a>
</div>

如何实现？

Answer 1

要实现这一点，您需要跟踪每个共享按钮集的状态。您正在使用我相信socialShare变量。而且很可能你正在使用ng-repeat所以这个变量是在每个重复范围上创建的，有效地创建了在重复子范围之外无法访问的n socialShare变量。

您可以解决此问题的一种方法是在文章对象上使socialShare变量可用，此行变为

<div social-share ng-show="article.socialShare" class="social-share arrow-down">

这就变成了

<a ng-click="toggle(article)" class="share-article clickable">

在控制器中创建类似

的方法

$scope.toggle=function(article) {
    angular.forEach(articles,function(article) { 
         article.socialShare=false;   //This would close all open items
    });
    article.socialShare=true;         // This will show the item selected.

}

您还可以查看库angular-ui手风琴控件。

单击共享时关闭其他文章的共享选项

1 个答案: