Question

我是AngularJS的新手。我想使用ng-repeat来呈现数据列表。

渲染后，每个数据都应该有<abbr class="timeago" title="2012-10-10 05:47:21"></abbr>个。然后我可以使用jquery插件timeago将其转换为人性化的文本about 1 hour ago。

我的代码如下。但它没有效果。请帮忙。

编辑：我的问题是，我可以获得正确的HTML呈现。但是directive中的代码无法运行。

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>

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

Answer 1

问题原因是：应该使用驼峰式weiboLister定义指令并在html中使用蛇形weibo-lister。感谢@tosh shimayama。

正确的代码如下:(我添加了一个remove函数，以防你正在寻找相同的东西。）

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>

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

如何在AngularJS ng-repeat完成后执行js

1 个答案: