Angular Dart - 在 ng-repeat 完成后立即执行一个函数答案

【问题标题】：Angular Dart - execute a function right after ng-repeat has finishedAngular Dart - 在 ng-repeat 完成后立即执行一个函数
【发布时间】：2014-05-10 00:01:05
【问题描述】：

在 stackoverflow 中搜索这个问题总是给我 Angular.js 的解决方案。

你会如何在 Anuglar dart 中做到这一点？

也就是说，我希望在 angular dart 中的 ng-repeat 指令完成渲染其元素后运行一个函数。

编辑：

事实证明，知道 ng-repeat 何时完成枚举并不意味着适当的 dom 元素已附加到文档。

我想我的预期问题是如何确定何时 ng-repeat 枚举的元素附加到 dom 树上，可以被选择器查询

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

谢谢

【问题讨论】：

如果您已链接该 Angular.js 问题，将会有所帮助。 when ng-repeat 到底是什么意思已经完成。第一代之后的物品？更新呢？

标签： dart angularjs-ng-repeat angular-dart

【解决方案1】：

我尝试了{{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());
}

【讨论】：

{{foo($last)}} void foo(bool isLast) {} 为我工作
实际上，我刚刚发现知道 ng-repeat 何时完成枚举是不够的，因为这并不一定意味着适当的 dom 元素已附加到文档中。查看我的编辑
您能否发布一个代码示例来重现您正在尝试做的事情。另一种尝试是使用突变观察者。您可以将$last 添加到标记中，并设置一个突变观察器来检查是否添加了具有ng-last 类的元素（不确定这是否是实际的类值）。
我用一个我已经成功尝试过的例子更新了我的答案。

【解决方案2】：

见angular.NgRepeatDirective

`$last` [bool]   true if the repeated element is last in the iterator.

但是，除非您的列表相当大，否则大多数元素不应该大致同时绘制吗？或许您可以watch 集合进行更改。

【讨论】：

【解决方案3】：

查看这个 GitHub 问题 (https://github.com/angular/angular.dart/issues/843) 了解更多信息。

我闻起来像虫子，但我不确定。

作为一种解决方法，您可以在 Angular 之外安排未来。在上面提到的问题中有更多关于这个的信息。

【讨论】：