个人中心
gpt4 book ai didi

dart - Angular Dart-在ng-repeat完成后立即执行功能

转载 作者：行者123 更新时间：2023-12-03 03:28:20 24 4
gpt4 key购买 nike

在stackoverflow上搜索这个问题总是为我提供Angular.js的解决方案。

您将如何在Anuglar Dart 中做到这一点？

那就是我想在angular dart中的ng-repeat指令完成渲染其元素之后运行一个函数。

编辑:

事实证明，知道ng-repeat何时完成枚举并不意味着适当的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

谢谢

最佳答案

我尝试了{{foo($last)}}，但对我也不起作用。

本示例使用MutationObserver来获取有关添加元素的通知。
我尝试了，它奏效了。

<!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());
}

关于dart - Angular Dart-在ng-repeat完成后立即执行功能，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22748168/

24 4 0
文章推荐： html - 客户端上的 Dart HTML 模板 : Separating HTML from Dart code
文章推荐： json - 保存和加载数据有哪些可能性？
文章推荐： java - Gradle创建不同的发行版
文章推荐： Java lang IllegalAccess 关于通过 HashBasedTable 累加器收集 Guava 不可变表
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com