Angular Dart - execute a function right after ng-r

2019-08-08 05:16发布

站内问答 / 移动开发
1139 3 6

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.

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

Thanks

3条回答
来，给爷笑一个
2楼-- · 2019-08-08 05:24

See angular.NgRepeatDirective

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

However unless your list is fairly large, should not most of the elements be drawn at roughly the same time? Perhaps you could watch the collection for changes.

查看更多
0人赞 添加讨论(0) 举报
叼着烟拽天下
3楼-- · 2019-08-08 05:29

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());
}
查看更多
0人赞 添加讨论(0) 举报
Animai°情兽
4楼-- · 2019-08-08 05:34

have a look at this GitHub issue (https://github.com/angular/angular.dart/issues/843) for more information.

It smells like a bug to me, but I'm not sure.

As a workaround you could schedule a future outside of angular. There's more info about this in the above mentioned issue.

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(6)