在列表的每个实例上运行单击函数，而不是当前

Question

这里有一个文章清单，我不知道如何对ng-重复中的每一篇新文章执行ng-click函数调用。现在，它适用于现有文章，但是当动态添加新文章(通过AJAX)时，我也需要这些文章具有相同的功能。

例如：ng-click函数调用"+“符号来显示社交按钮，在通过AJAX插入新文章(即:删除文章，让列表再次填充新元素)后，它似乎无法工作。

AngularJS是否提供了这样做的任何工具？

<div>
  <div>
    <input type="text" ng-model="search">
    <span>{{filtered.length}} article(s)</span>
  </div>
  <div article-listing ng-repeat="article in filtered = (wikiArticles | filter:search)">
    <!--Individual article begin-->
    <span>
      <a href="{{article.url}}">{{article.title}}</a>
    </span>
    <div>
      <a ng-click="articles.removeArticle($index)" title="Delete">
        <span>&#10006;</span>
      </a>
      <a ng-click="articles.toggleShare(article)">
        <span class="plus-sign" title="Share">&#10006;</span>
        <div social-share ng-show="article.socialShare">
          <div ng-click="socialShare = !socialShare" class="addthis_toolbox addthis_default_style addthis_32x32_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>
          </div>
        </div>
      </a>
    </div>
    <div>{{article.extract}}</div>
    <!--Individual article end-->
  </div>
</div>

似乎不适用于新文章插入的ng-click调用的代码

$scope.articles = (function() {
  return {
    shuffleArticles : function() {
      $scope.wikiArticles.reverse();
    },
    removeArticle : function(index) {
      $scope.wikiArticles.splice(index, 1);
      $scope.fireAPICalls();
    },
    toggleShare : function(currArticle) {
      var previousState = currArticle.socialShare;
      angular.forEach($scope.wikiArticles, function(article) {
        article.socialShare = false;
      });
      currArticle.socialShare = previousState ? false : true;
    }
  }
})();

Answer 1

您的ng-click调用实际上是工作的-您可以在调试器中查看ng-show切换。

问题是在添加的新项目上没有什么可显示的。

您最初添加的文章都使用.addthis类填充了它们的图标，例如，下面是您的Facebook图标元素：

<a class="addthis_button_facebook at300b" title="Facebook" href="#">
   <span class=" at300bs at15nc at15t_facebook">
     <span class="at_a11y">Share on facebook</span>
   </span>
</a>

at300bs包括以下显示图像的css：

background: url(widget058_32x32.gif) no-repeat left!important;

但是，在添加新项时，不包括所需的.addthis类。它们的元素看起来如下：

<a class="addthis_button_facebook"></a>

所以ng-show没有什么可显示的(它显示一个0x0div)。

在添加新元素时，将.addthis类添加到新元素中，您将全部设置好它们。