angulaires - ng-si - comment faire pour rappel, après ng-si le modèle a été rendu

Angulaire, j'ai besoin d'appeler une fonction après un élément avec certaines classe a été chargé.
Affichage de l'élément est contrôlé par ng-si='expr'. Valeur de $champ d'application.expr est réglé après un certain appel ajax a répondu.

Maintenant, si j'essaie de mettre $regarder sur expr, ou à l'aide de $evalAsync. il n'est pas de travail. probablement la raison étant que ces événements sont organisés avant le modèle de la partie effectivement exécuté.

Voici un exemple de code : http://jsbin.com/kuyas/1/edit
Ici, j'ai besoin d'un rappel genre de chose sur ng-si c'est exécuté une fois que le modèle a rendu.

OriginalL'auteur Charanjeet Kaur | 2014-06-26

  1. 26

    Une réponse possible serait de créer une directive qui fait tout ce que vous voulez faire. Si vous utilisez ensuite cette directive que dans la section du code HTML contrôlé par le ng-si, alors la directive sont en dormance jusqu'à ce que le ng-si l'expression est vraie.

    Serait-ce faire ce que vous voulez?

    il a travaillé comme un charme. vous rock!
    Ce doit être la accepté de répondre.
    J'adore cette. J'ai créé un IAmRendered composant qui répondra à $OnInit() pour être affiché et sur $OnDestroy() pour ses funérailles! Très bonne suggestion.
    Comment faisons-nous cela dans angular1
    Vérifier ma réponse ci-dessous

    OriginalL'auteur John Munsch

  2. 16

    Problème était qu'il n'y a aucun moyen de savoir si angulaire est fait avec le résumé de la boucle, en s'assurant que tous les éléments ont été rendus.

    Pour résoudre ce problème, il y avait deux options

    1. Envelopper votre fonction de rappel dans une directive. l'inclure dans la directive ng-si. et faire que cette expression est vrai que si u veux votre callback à exécuter.
    2. Appel de votre fonction de rappel à l'intérieur, setTimeOut(function(){ ... }, 0); que les navigateurs par défaut garder tous les événements dans une file d'attente, donc, lors de digérer la boucle est en cours d'exécution, votre fonction de rappel dans la file d'attente et exécuté dès digérer la boucle est terminée.
    Je préfère cette solution avec setTimeout, me permettant de faire des choses qui ne sont pas un widget sur une page ou une limite à être à l'intérieur de la ng_if
    setTimeout(function(){ // do whatever }, 0); C'est parfait. Merci!!!!

    OriginalL'auteur Charanjeet Kaur

  3. 2

    Solution la plus simple à mon avis est de faire ce qui suit:

    <div ng-if="sectionActivated">
    <div ng-init="callBack()"></div>
</div>

    Votre callback sera appelée que lorsque ce qui est affectée par ng-if a été rendue.

    cela a partiellement fonctionné pour moi, mais ils ont utilisé setTimeout(function(){ // do whatever }, 0); aussi parce qu'il y avait certains éléments personnalisés qui ne sont pas encore prêtes, comme j'ai essayé de les désactiver, donc, pour ces éléments personnalisés j'ai utilisé le set timeout au bout de 5 secondes de chargement de vos pages afin de les désactiver

    OriginalL'auteur aBertrand

  4. 1

    La directive pourrait ressembler à quelque chose comme ceci:

    import * as angular from 'angular';

class OnFinishRenderDirective implements angular.IDirective {

  public restrict = 'A';
  public replace = false;

  public link = (
    scope: any,
    //scope:        angular.IScope,
    element: angular.IAugmentedJQuery,
    attr: any,
    modelCtrl: any,
    link: angular.ITemplateLinkingFunction ) => {

    if ( scope.$last === true ) {
      this.$timeout(() => {
        scope.$emit( 'elementRendered' );
      } );
    }

  }

  constructor( private $timeout: angular.ITimeoutService ) { }

}

export function onFinishRenderFactory(): angular.IDirectiveFactory {

  var directive = ( $timeout: angular.ITimeoutService ) => new OnFinishRenderDirective( $timeout );
  directive.$inject = [ '$timeout' ];
  return directive;
}

    Vous devez les importer et de les ajouter à votre module

    import { onFinishRenderFactory } from './onFinishRender/onFinishRender.directive';

angular.module( 'yourModule', [] )
.directive( 'onFinishRender', onFinishRenderFactory() )

    Ensuite, vous pouvez utiliser la directive quelque part dans votre balisage à émettre le cas lorsque la directive a été rendue.

    <div onFinishRender>I am rendered</div>

    Vous pouvez même ajouter un attribut supplémentaire dans la directive DIV que vous pouvez ensuite saisir à partir de l'ATTRIBUT de l'objet dans la fonction de lien et de l'ajouter à votre $émettent de la fonction d'identifier ce DIV être rendu.

    Ne fait que répondre à votre question?

    OriginalL'auteur Mattijs