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

StackOverflow https://stackoverflow.com/questions/22748168

Pergunta

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

Foi útil?

Solução

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

Outras dicas

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.

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.

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top