Running click functions on every instance of listing instead of current

Question

I have a listing of articles here, and I can't figure out how to execute the ng-click function calls on every new article inside the ng-repeat. Right now it works for existing articles, but when new articles are added dynamically (via AJAX), I need those to have the same functionality too.

For example: the ng-click function calls on the "+" sign to reveal social buttons seem to not work once new articles are inserted via AJAX (ie: delete articles, and let list be populated again with new elements)

Does AngularJS provide any tools to do that?

<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>

Code for ng-click calls that don't seem to work for new article insertions

$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;
    }
  }
})();

Try to boil the question down to something smaller we can answer. That is a lot of html to parse through. Also a jsfiddle would be helpful. — Zack Argyle, Dec 02 '13 at 21:00
@ZackArgyle Thanks for the suggestion. I cleaned up the code a bit and tried to clarify my question more. I'll try to figure out how to use Angular on jsfiddle. Right now I have a live app here: discoverwiki.com that exhibits the problem. — theintellects, Dec 02 '13 at 21:17
The answer is always the delegation... if newly added items do not "see" bindings, either rebind the method throughout the scope with every ajax add (rerun module function) or find other way to delegate. — Rastko, Dec 02 '13 at 21:53

score 0 · Answer 1 · answered Dec 02 '13 at 22:26

Your ng-click calls are actually working- you can watch the ng-show toggle in the debugger.

The problem is that there is nothing to display on the new items you add.

The articles you initially add all have their icons populated with the .addthis classes, for instance here's your Facebook icon element:

<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 includes the following css which displays the image:

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

However as you add new items, you aren't including the needed .addthis classes to them. Their elements look like this:

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

So ng-show has nothing to display (it shows a 0x0 div).

Add the .addthis classes to your new elements as you add them and you'll be all set.

I see it now, thanks @KayakDave. The weird thing is I'm actually not handling adding the spans into the addthis anchor tags. My suspicion is that's something the AddThis script within the `head` is injecting. Would this mean there's something I'm doing wrong when generating the articles? I'm fairly new to Angular so I'm suspecting there's some special quirks I haven't grasped yet. https://github.com/JayHuang/Wiki — theintellects, Dec 02 '13 at 22:58
Looks like this is a common problem. Here's a very related question with a directive that may fix this: http://stackoverflow.com/questions/15593039/angularjs-and-addthis-social-plugin — KayakDave, Dec 02 '13 at 23:01

Running click functions on every instance of listing instead of current

1 Answers1