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类添加到新元素中，您将全部设置。

在每个列表实例上运行点击功能而不是当前

1 个答案: