angularJS: Comment appeler l'enfant du champ d'application de la fonction de parent

Comment pouvez appeler une méthode définie dans l'enfant de son parent?

function ParentCntl() {
    //I want to call the $scope.get here
}

function ChildCntl($scope) {
    $scope.get = function() {
        return "LOL";    
    }
}

http://jsfiddle.net/wUPdW/

  • Meilleur pari, définir un service, à injecter de ce service dans les deux contrôleurs. Ou utiliser rootscope.
InformationsquelleAutor 9blue | 2013-09-26
  1. 137

    Vous pouvez utiliser $de diffusion de la mère à l'enfant:

    function ParentCntl($scope) {

    $scope.msg = "";
    $scope.get = function(){
        $scope.$broadcast ('someEvent');
        return  $scope.msg;        
    }
}

function ChildCntl($scope) {               
    $scope.$on('someEvent', function(e) {  
        $scope.$parent.msg = $scope.get();            
    });

    $scope.get = function(){
        return "LOL";    
    }
}

    De travail violon: http://jsfiddle.net/wUPdW/2/

    Mise à JOUR: Il y a une autre version, moins couplée et plus testable:

    function ParentCntl($scope) {
    $scope.msg = "";
    $scope.get = function(){
        $scope.$broadcast ('someEvent');
        return  $scope.msg;        
    }

    $scope.$on('pingBack', function(e,data) {  
        $scope.msg = data;        
    });
}

function ChildCntl($scope) {               
    $scope.$on('someEvent', function(e) {  
        $scope.$emit("pingBack", $scope.get());        
    });

    $scope.get = function(){
        return "LOL";    
    }
}

    Violon: http://jsfiddle.net/uypo360u/

    • C'est assez cool! Mais, si vous n'avez pas (vouloir) savoir où l'appelant est portée (je veux dire dans $scope.$parent ou dans $scope.$parent.$parent, etc)? Ah, oui: passer un rappel dans les params! 🙂
    • vous êtes très à droite; il n'y a plus d'une façon: $emit d'un enfant à un parent. je pense qu'il est temps de mettre à jour ma réponse..
    • Est-ce une bonne idée d'appeler à global auditeur où est somwhere, contrôleur enfant dans ce cas? N'est-il pas antipattern et dur à tester plus tard? Ne devrions-nous pas utiliser des injections ou qch?
    • chaque chose doit être utilisée avec précaution, c'est sûr.. Certains préfèrent utiliser des services dans des cas similaires. De toute façon , j'ai ajouté plus élégante version (sans ennuyeux $parent)
    • Vous avez de la chance $broadcast et $emit sont synchrones, d'autre de ces approches ne fonctionnent pas. Il n'y a rien dans le documentation qui dit qu'ils sont nécessairement synchrone de par leur conception, soit
    • Cette approche c'est plus propre. Passer un rappel à la $broadcast et vous pouvez éliminer les pingBack tout à fait.
    • Je suis d'accord avec plus chic. Vous n'avez pas besoin pingBack ni que $scope.msg. Vous pouvez passer aussi un argument objet de $broadcast, si vous n'aimez pas l'idée de transmission fonction de rappel.

    InformationsquelleAutor Cherniv
  2. 31

    Permettez-moi de suggérer une autre solution:

    var app = angular.module("myNoteApp", []);


app.controller("ParentCntl", function($scope) {
    $scope.obj = {};
});

app.controller("ChildCntl", function($scope) {
    $scope.obj.get = function() {
            return "LOL";    
    };
});

    Moins de code et l'utilisation de l'héritage par prototype.

    Plunk

    • Quelqu'un pourrait-il expliquer si cette approche est meilleure que l'événement piloté par l'approche mentionnée ci-dessus dans quels cas et si elle l'est, pourquoi? que faire si vous avez multi lvl hiérarchie w enfant contrôleurs? serait-ce de travailler si l'obj.obtenir est définie à l'intérieur d'un contrôleur enfant à l'intérieur d'un contrôleur enfant aussi longtemps qu'aucun des contrôleurs ont le même nom de fonction définie? Je vous remercie à l'avance.
    • Intéressant... merci pour le commentaire, ce me jetant hors est que je pensais que js prototype / angularjs la portée de l'héritage applique uniquement à une seule direction.... enfant - > parent ou enfant -> parent, et non pas l'inverse....mais je suppose que je suis en manque de quelque chose @_@
    • Permettez-moi de corriger ce que j'ai dit qui n'est pas totalement vrai. Vous avez raison dans ce que vous avez dit: la portée de l'héritage n'est appliquée qu'à une seule direction.... enfant - > parent. Qu'est-ce qui se passe ici est que si vous définissez $champ d'application.obtenez de l'enfant dans le champ d'application, se sera définie seulement sur l'enfant(Parfois appelée primitive définition). Mais lorsque vous définissez $champ d'application.obj.obtenir, puis l'enfant va chercher obj qui est défini sur la portée parent, ce qui est en haut de la hiérarchie.
    • Comment ce travail, si l'enfant a son propre isoler portée?
    • La question ne faisait pas référence isolé portée, mais si vous avez isolé portée, vous pouvez utiliser isoler la portée de la liaison. De l'omi, de la radiodiffusion est un peu brouillon.
    • Je ne pense pas que cet exemple est possible que si vous avez besoin d'accéder à l'enfant du contrôleur de fonction de la société mère controller, pas de modèle. Cet exemple ne fonctionne qu'en raison de la liaison bidirectionnelle sur le modèle, ce qui je suppose garde d'interrogation jusqu'à ce que $scope.obj.get() est une fonction valide.

    InformationsquelleAutor Canttouchit
  3. 11

    Registre de l'enfant en fonction sur le parent lorsque l'enfant est en cours d'initialisation. J'ai utilisé "que" la notation pour plus de clarté dans le modèle.

    MODÈLE

    <div ng-controller="ParentCntl as p">
  <div ng-controller="ChildCntl as c" ng-init="p.init(c.get)"></div>
</div>

    CONTRÔLEURS

    ...
function ParentCntl() {
  var p = this;
  p.init = function(fnToRegister) {
    p.childGet = fnToRegister;
  };
 //call p.childGet when you want
}

function ChildCntl() {
  var c = this;
  c.get = function() {
    return "LOL";    
  };
}

    "Mais", dites-vous, "ng-init ce n'est pas censé être utilisé de cette façon!". Eh bien, oui, mais

    1. que la documentation n'explique pas pourquoi pas, et
    2. Je ne crois pas que la documentation auteurs ont considéré TOUS les cas possibles d'utilisation pour elle.

    Je dis que c'est à bon escient. Si vous voulez downvote moi, s'il vous plaît commenter avec les motifs! 🙂

    J'aime cette approche, car elle conserve les composants plus modulaire. Les seules liaisons sont dans le modèle, et signifie que

    • le Contrôleur enfant ne doit pas savoir quelque chose au sujet de l'objet à ajouter pour sa fonction (comme dans @canttouchit réponse)
    • le contrôle parent peut être utilisé avec n'importe quel autre enfant de contrôle qui a une fonction get
    • ne nécessite pas de radiodiffusion, qui sera très laid dans un grand app, sauf si vous contrôler étroitement l'événement de l'espace de noms

    Cette approche plus près de Tero l'idée de modularising avec les directives (noter que, dans son modularisé exemple, contestants se transmet de parent à enfant "à la" directive DANS LE MODÈLE).

    En effet une autre solution pourrait être de considérer la mise en œuvre de la ChildCntl comme une directive et d'utiliser le & de liaison pour enregistrer le init méthode.

    • Je sais que c'est un vieux post, mais cela semble être une mauvaise idée parce que le parent peut faire référence à l'enfant après que l'enfant est détruit.
    • C'est une bien meilleure solution que la radiodiffusion des événements. Pas parfait, mais mieux. Si le nettoyage est en effet un problème.
    InformationsquelleAutor poshest
  4. -1

    Vous pouvez faire l'objet enfant.

    var app = angular.module("myApp", []);


app.controller("ParentCntl", function($scope) {
    $scope.child= {};
    $scope.get = function(){
      return $scope.child.get(); //you can call it. it will return 'LOL'
    }
   //or  you can call it directly like $scope.child.get() once it loaded.
});

app.controller("ChildCntl", function($scope) {
    $scope.obj.get = function() {
            return "LOL";    
    };
});

    Ici, l'enfant est la preuve de la destination de la méthode get.

    InformationsquelleAutor Ramu Agrawal