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

Question

我在这里有一个文章列表，但我不知道如何对 ng-repeat 中的每一篇 new 文章执行 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 没有可显示的内容（它显示一个 0x0 div）。

将.addthis 类添加到您添加的新元素中，然后您就完成了。