角飞镖 - 执行NG-重复完成后右功能 [英] Angular Dart - execute a function right after ng-repeat has finished
问题描述
搜索计算器这个问题总是给我Angular.js解决方案。
Searching stackoverflow for this question always give me the solution for Angular.js.
您将如何在Anuglar镖这样做吗?
How would you do this in Anuglar dart?
这是我想有一个函数运行后角中的镖NG重复指令已完成渲染的元素。
That is I want to have a function run after an ng-repeat directive in angular dart has finished rendering its elements.
编辑:
原来,知道什么时候NG-重复完成枚举并不意味着相应的DOM元素已经被附加到文件。
It turns out that knowing when ng-repeat has finished enumerating doesn't means the appropriate dom element has being attached to the document.
我想我的预期的问题是如何确定当所有
通过纳克重复枚举元素附着到DOM树,可以是
通过选择查询
I guess my intended question was how to determine when all elements enumerated by ng-repeat is attached to the dom tree and can be queried by selector
EDIT2
<div ng-repeat='fruit in fruits'>
<li class="fruit">{{fruit}}</li>
</div>
querySelectorAll('.fruit'); // should return all <li> element created by ng-repeat
// the trick is knowing when and where to call querySelectorAll
感谢
推荐答案
我试过 {{美孚($去年)}}
并没有为我工作之一
I tried {{foo($last)}}
and it didn't work for me either.
本例使用 MutationObserver
来收到通知的补充元素。
我想它和它的工作。
This example uses MutationObserver
to get notified about added elements.
I tried it and it worked.
<!DOCTYPE html>
<html>
<head>
<script src="packages/shadow_dom/shadow_dom.debug.js"></script>
</head>
<body ng-cloak>
<ul somefruits>
<li ng-repeat='fruit in ctrl.fruits track by $index'
class="fruit" ng-class="{'ng-last': $last}">{{fruit}}</li>
</ul>
<script type="application/dart" src="index.dart"></script>
<script type="text/javascript" src="packages/browser/dart.js"></script>
</body>
</html>
library angular_default_header.main;
import 'dart:html';
import 'package:angular/angular.dart';
@NgController(selector: '[somefruits]', publishAs: 'ctrl')
class Fruits {
Fruits(){
print('fruits created');
}
List fruits = ['Apple', 'Banana', 'Orange', 'Kiwi'];
}
class MyAppModule extends Module {
MyAppModule() {
type(Fruits);
}
}
void mutationCallback(List<MutationRecord> mutations, MutationObserver observer) {
mutations.forEach((mr) {
mr.addedNodes.forEach((Node n) {
if(n is Element) {
if(n.classes.contains('ng-last')) {
print('last added');
observer.disconnect();
n.style.border = '1px solid red';
}
}
});
});
}
main() {
print('main');
var ul = document.querySelector('ul');
new MutationObserver(mutationCallback).observe(ul, childList: true);
ngBootstrap(module: new MyAppModule());
}
这篇关于角飞镖 - 执行NG-重复完成后右功能的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!