角飞镖 - 执行NG-重复完成后右功能 [英] Angular Dart - execute a function right after ng-repeat has finished

查看:287
本文介绍了角飞镖 - 执行NG-重复完成后右功能的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

搜索计算器这个问题总是给我Angular.js解决方案。

Searching stackoverflow for this question always give me the solution for Angular.js.

您将如何在Anuglar镖这样做吗?

How would you do this in Anuglar dart?

这是我想有一个函数运行后角中的镖NG重复指令已完成渲染的元素。

That is I want to have a function run after an ng-repeat directive in angular dart has finished rendering its elements.

编辑:

原来,知道什么时候NG-重复完成枚举并不意味着相应的DOM元素已经被附加到文件。

It turns out that knowing when ng-repeat has finished enumerating doesn't means the appropriate dom element has being attached to the document.

我想我的预期的问题是如何确定当所有
  通过纳克重复枚举元素附着到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

感谢

推荐答案

我试过 {{美孚($去年)}} 并没有为我工作之一

I tried {{foo($last)}} and it didn't work for me either.

本例使用 MutationObserver 来收到通知的补充元素。
我想它和它的工作。

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

这篇关于角飞镖 - 执行NG-重复完成后右功能的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆