问题描述
在 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.
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 完成后立即执行一个函数的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!