如何AngularJS后Exec的JS NG-重复完成 [英] how to exec js after AngularJS ng-repeat finished
问题描述
我是新来AngularJS。我想用 NG-重复来呈现数据的列表。
每个数据都应该有一个＆LT;简称类=TIMEAGO称号=2012年10月10日5时47分21秒＆GT;＆LT; /缩写＆GT; 后都呈现。然后，我可以使用jQuery插件 TIMEAGO 来把它变成人类友好的文本约1小时前。
我的code是如下。但它取没有影响。请帮助。
编辑：我的问题是，我可以作出的正确的HTML。但在指令code 不运行。
在html：
＆LT; DIV NG-应用='weiboApp'NG控制器=WeiboListCtrl＆GT;
＆LT;表＆gt;＆LT;＆TBODY GT;
＆LT; TR NG重复='W在微博'weiboLister ='W'＆GT;
＆所述; TD＆GT; {{w.text}}＆GT;＆下; / TD＆GT;
＆LT; TD＆GT;＆LT;简称类=TIMEAGO称号={{w.created}}＆GT;＆LT; /缩写＆GT;＆LT; / TD＆GT;
＆LT; / TR＆GT;
＆LT; / TBODY＆GT;＆LT; /表＆gt;
＆LT; / DIV＆GT;
在JS：
VAR模块=角
.module（'weiboApp'，[]）
.directive（'weiboLister'，函数（）{
返回{
限制：'A'，
链接：功能（范围，元素，属性）{
scope.watch（'W'，函数（VAL）{
的console.log（元）; //这永远不会运行
element.find（abbr.timeago）TIMEAGO（）。 //这永远不会运行
}，真正的）;
}
}
}）;功能WeiboListCtrl（$范围，$ HTTP）{
$ http.get（'/ API /微博/列表）。成功（功能（数据）{
$ scope.weibo =数据;
}）;
}
问题竟然是：应定义指令与驼峰 weiboLister 和使用它与蛇的情况下HTML 微博 - 利斯特。感谢@tosh shimayama。
正确的code如下：（我添加了一个删除在你正在寻找同样的事情的情况下的功能。）
在html：
＆LT; DIV NG-应用='weiboApp'NG控制器=WeiboListCtrl＆GT;
＆LT;表＆gt;＆LT;＆TBODY GT;
＆LT; TR NG重复='W在微博微博 - 利斯特='W'＆GT; ＆LT;！ - 重要的是这里的蛇情况 - ＆GT;
＆所述; TD＆GT; {{w.text}}＆GT;＆下; / TD＆GT;
＆LT; TD＆GT;＆LT;简称类=TIMEAGO称号={{w.created}}＆GT;＆LT; /缩写＆GT;＆LT; / TD＆GT;
＆所述; TD＆GT;＆下;一个纳克点击='删除（重量）'＆GT;＆放大器;倍;＆下; / A＆GT;＆下; / TD＆GT;
＆LT; / TR＆GT;
＆LT; / TBODY＆GT;＆LT; /表＆gt;
＆LT; / DIV＆GT;
在JS：
VAR模块=角
.module（'weiboApp'，[]）
.directive（'weiboLister'，函数（）{
函数删除（ID，s_function，f_function）{
// ...
如果成功{s_function（）; }
其他{f_function（）; }
}
返回{
限制：'A'，
链接：功能（范围，元素，属性）{
范围。$腕表（'W'，函数（VAL）{
element.find（abbr.timeago）TIMEAGO（）。
}
scope.destroy =函数（回调）{
deletenews（scope.w.id，函数（）{
// s_function，做你想做的事情，当成功删除
element.fadeOut（400，函数（）{
//这个回调将拼接模型元素
如果（回调）callback.apply（范围）;
}）
}，函数（）{
// f_function，当失败删除
}）;
};
}
}
}）;功能WeiboListCtrl（$范围，$ HTTP）{
$ http.get（'/ API /微博/列表）。成功（功能（数据）{
$ scope.weibo =数据;
}）; $ scope.removeWeibo =功能（W）{
变种IDX = $ scope.weibo.indexOf（重量）;
如果（IDX！== -1）{
this.destroy（函数（）{
$ scope.weibo.splice（IDX，1）;
}）;
}
};
}
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;
});
}
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)'>×</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);
});
}
};
}
这篇关于如何AngularJS后Exec的JS NG-重复完成的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
