Angular Dart - 在 ng-repeat 完成后立即执行一个函数 [英] Angular Dart - execute a function right after ng-repeat has finished
问题描述
在 stackoverflow 上搜索这个问题总是给我 Angular.js 的解决方案.
你会如何在 Anuglar dart 中做到这一点?
也就是说，我希望在 angular dart 中的 ng-repeat 指令完成其元素渲染后运行一个函数.
事实证明，知道 ng-repeat 何时完成枚举并不意味着适当的 dom 元素已附加到文档.
<块引用>我想我想要的问题是如何确定何时所有由 ng-repeat 枚举的元素附加到 dom 树，并且可以选择器查询
EDIT2
<li class="fruit">{{fruit}}</li>querySelectorAll('.fruit');//应该返回所有 <li>由 ng-repeat 创建的元素//诀窍是知道何时何地调用 querySelectorAll
谢谢
我尝试了 {{foo($last)}} 但它对我也不起作用.
此示例使用 MutationObserver 来获取有关添加元素的通知.我试过了，它奏效了.
<头><script src="packages/shadow_dom/shadow_dom.debug.js"></script><body ng-cloak><一些水果><li ng-repeat='fruit in ctrl.fruits track by $index'class="fruit" ng-class="{'ng-last': $last}">{{fruit}}</li><script type="application/dart" src="index.dart"></script><script type="text/javascript" src="packages/browser/dart.js"></script></html>library angular_default_header.main;导入飞镖:html"；导入'包:角度/角度.dart';@NgController(选择器:'[somefruits]'，publishAs:'ctrl')类水果{水果(){print('水果创建');}List Fruits = ['Apple', 'Banana', 'Orange', 'Kiwi'];}类 MyAppModule 扩展模块 {我的应用模块(){类型(水果)；}}void mutationCallback(List<MutationRecord>突变，MutationObserver观察者){突变.forEach((先生){mr. addedNodes.forEach((节点 n) {如果(n 是元素){if(n.classes.contains('ng-last')) {print('最后添加');观察者断开连接()；n.style.border = '1px 纯红色';}}});});}主要的() {打印('主要')；var ul = document.querySelector('ul');new MutationObserver(mutationCallback).observe(ul, childList: true);ngBootstrap(module: new MyAppModule());}Searching stackoverflow for this question always give me the solution for Angular.js.
How would you do this in Anuglar dart?
That is I want to have a function run after an ng-repeat directive in angular dart has finished rendering its elements.
EDIT:
It turns out that knowing when ng-repeat has finished enumerating doesn't means the appropriate dom element has being attached to the document.
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
Thanks
I tried {{foo($last)}} and it didn't work for me either.
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());
}
这篇关于Angular Dart - 在 ng-repeat 完成后立即执行一个函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
