Angular Dart - execute a function right after ng-repeat has finished

问题

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

回答1:

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

回答2:

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.

回答3:

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.

来源：https://stackoverflow.com/questions/22748168/angular-dart-execute-a-function-right-after-ng-repeat-has-finished

标签

dart

angularjs-ng-repeat

angular-dart