2

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

1 に答える 1

1

問題は次のとおりです。キャメルケースweiboListerを使用してディレクティブを定義し、それをhtmlでスネークケースを使用して使用する必要がありますweibo-lister。@toshshimayamaに感謝します。

以下の正しいコード:(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);
      });
    }
  };
}
于 2012-10-10T07:57:25.380 に答える