Question

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

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

那就是我想在角落飞镖中的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

由于

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

Answer 2

请参阅angular.NgRepeatDirective

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

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

Answer 3

了解更多信息，请查看此GitHub问题（https://github.com/angular/angular.dart/issues/843）。

它闻起来像个臭虫，但我不确定。

作为一种解决方法，您可以安排角度以外的未来。在上述问题中有关于此的更多信息。

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

3 个答案: