how to exec js after AngularJS ng-repeat finished

Question

I'm new to AngularJS. I want to use ng-repeat to render a list of data.

Each of the data should have a <abbr class="timeago" title="2012-10-10 05:47:21"></abbr> alike after rendered. And then I could use jquery plugin timeago to turn it into human friendly text about 1 hour ago.

My code is as below. But it take no effect. Please help.

EDIT: My problem is that, I can get the right html rendered. But code in directive do not run.

the html:

<div ng-app='weiboApp' ng-controller="WeiboListCtrl">
<table><tbody>
<tr ng-repeat='w in weibo' weiboLister='w'>
  <td>{{ w.text }}></td>
  <td><abbr class="timeago" title="{{ w.created }}"></abbr></td>
</tr>
</tbody></table>
</div>

the js:

var module = angular
            .module('weiboApp', [])
            .directive('weiboLister', function () {
              return {
                restrict: 'A',
                link: function (scope, element, attr) {
                  scope.watch('w', function (val) {
                    console.log(element); //this never run
                    element.find("abbr.timeago").timeago(); //this never run
                  }, true);
                }
              }
            });

function WeiboListCtrl($scope, $http) {
  $http.get('/api/weibo/list').success(function(data) {
    $scope.weibo = data;
  });
}

Are you sure that ajax success() is getting called? I tried to reproduce the issue, but simplified version seems to be working for me... I suggest you to create fiddler or plunker to demonstrate the problem. — Tosh
– Tosh, Commented Oct 10, 2012 at 5:20
I think success() is not the problem. Because I can get <tr> and its content rendered properly. That is I can get the html I want. But element.find("abbr.timeago").timeago() do not run. — hbrls
– hbrls, Commented Oct 10, 2012 at 5:29
I succeeded to get console.log (and jquery driven transformation) called: plnkr.co/edit/QjOybQ — Tosh
– Tosh, Commented Oct 10, 2012 at 5:48
Thanks for the example! The problem is about camel-case weiboLister and snake-case weibo-lister. Now it runs. How can I mark you as the right answer. — hbrls
– hbrls, Commented Oct 10, 2012 at 5:52
I just gave you the hint. So please post the correct answer yourself and mark it as right answer and just up-vote my comments. — Tosh
– Tosh, Commented Oct 10, 2012 at 6:19

hbrls · Accepted Answer · 2012-10-10 08:14:17Z

The problem turned out to be: should define directive with camel-case weiboLister and use it in html with snake-case weibo-lister. Thanks to @tosh shimayama.

The correct code as below: (I added a remove function in case you're looking for the same thing.)

the html:

<div ng-app='weiboApp' ng-controller="WeiboListCtrl">
<table><tbody>
<tr ng-repeat='w in weibo' weibo-lister='w'> <!--important to be snake-case here-->
  <td>{{ w.text }}></td>
  <td><abbr class="timeago" title="{{ w.created }}"></abbr></td>
  <td><a ng-click='remove(w)'>&times;</a></td>
</tr>
</tbody></table>
</div>

the js:

var module = angular
        .module('weiboApp', [])
        .directive('weiboLister', function () {
          function delete(id, s_function, f_function) {
            //...
            if success { s_function(); }
            else { f_function(); }
          }
          return {
            restrict: 'A',
            link: function (scope, element, attr) {
              scope.$watch('w', function (val) {
                element.find("abbr.timeago").timeago();
              }
              scope.destroy = function(callback) {
                deletenews(scope.w.id, function () {
                  //s_function, things you want to do when delete with success
                  element.fadeOut(400, function () {
                    //this callback will splice the element in model
                    if (callback) callback.apply(scope);
                  })
                }, function () {
                  //f_function, when delete with failure
                });
              };
            }
          }
        });

function WeiboListCtrl($scope, $http) {
  $http.get('/api/weibo/list').success(function(data) {
    $scope.weibo = data;
  });

  $scope.removeWeibo = function(w) {
    var idx = $scope.weibo.indexOf(w);
    if (idx !== -1) {
      this.destroy(function() {
        $scope.weibo.splice(idx, 1);
      });
    }
  };
}

Collectives™ on Stack Overflow

how to exec js after AngularJS ng-repeat finished

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related