L'accès hérité de portée avec le Contrôleur Comme approche

Avec l'original de la manière de définir des contrôleurs, l'accès à la mère de la portée a été assez difficile, car l'enfant fait hérite de son parent.

app.controller("parentCtrl", function($scope){
   $scope.name = "Parent";
})
.controller("childCtrl", function($scope){
   $scope.childName = "child of " + $scope.name;
});

<div ng-controller="parentCtrl">
   {{name}}
   <div ng-controller="childCtrl">
      {{childName}}
   </div>
</div>

Le Contrôleur-Que l'approche semble être le recommandé façon de déclarer un contrôleur. Mais avec le Contrôleur-Que, l'approche ci-dessus ne fonctionne plus.

Sûr, je peux accéder à la portée parent avec pc.name de la Vue:

<div ng-controller="parentCtrl as pc">
   {{pc.name}}
   <div ng-controller="childCtrl as cc">
      {{cc.childName}}
   </div>
</div>

J'ai quelques problèmes avec cette (potentiel de code spaghetti), mais cette question est à propos d'accéder à la portée parent de l'enfant contrôleur.

La seule façon que je peux voir ce travail est:

app.controller("parentCtrl", function(){
   this.name = "parent";
})
.controller("childCtrl", function($scope){
   $scope.pc.name = "child of " + $scope.name;
   //or
   $scope.$parent.pc.name = "child of " + $scope.name;

   //there's no $scope.name
   //and no $scope.$parent.name
});

Alors maintenant, le contrôleur enfant a besoin de savoir à propos de "pc" - à l'exception, ce qui devrait (dans mon esprit) être limité à la vue. Je ne pense pas qu'un contrôleur enfant devrait savoir sur le fait que la vue a décidé de déclarer un ng-controller="parentCtrl as pc".

Q: Quelle est la bonne approche?

EDIT:

Précisions: je ne suis pas à la recherche d'hériter d'un parent contrôleur. Je suis à la recherche d'hériter/modifier l'étendue partagée. Donc, si j'ai été de modifier le premier exemple, je devrais être capable de faire ce qui suit:

app.controller("parentCtrl", function($scope){
   $scope.someObj = {prop: "not set"};
})
.controller("childCtrl", function($scope){
   $scope.someObj.prop = "changed";
});
  • Angulaire de "contrôleurs" sont vraiment de plus d'un "helper de vue" ou un "modèle de vue". Les guides de style qui vous suggérons d'utiliser controllerAs activement vous encourageons à utiliser pc directement ou brillant au cours de cette situation. Je suppose que vous pourriez mettre en place une chaîne d'héritage entre parentCtrl et childCtrl, par exemple childCtrl.prototype = Object.create(parentCtrl.prototype) et puis dans votre childCtrl constructeur, this.name renvoie au nom du parent avant d'ombre.
InformationsquelleAutor New Dev | 2014-10-30
  1. 62

    Après des recherches, je suis arrivé à la constatation suivante:

    Contrôleur-Que l'approche n'est PAS un substitut à l'aide de $scope. Les deux ont leur place, et peut/doit être utilisé judicieusement.

    1. $scope fait exactement ce que son nom l'indique: c'est à dire qu'il définit ViewModel propriétés sur le $scope. Ce qui fonctionne le mieux pour le partage de portée avec imbriqué contrôleurs qui peuvent utiliser le $scope de conduire leur propre logique ou de la changer.
    2. Controler-Comme le définit l'ensemble de la commande de l'objet comme un ViewModel avec un nom de champ d'application (via le contrôleur d'alias). Cela fonctionne mieux que dans la Vue (mais pas les autres contrôleurs), si elle décide si elle veut faire référence à un contrôleur spécifique ViewModel.

    Voici un exemple:

    JS:

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

//Then the controllers could choose whether they want to modify the inherited scope or not:
app.controller("ParentCtrl", function($scope) {
    this.prop1 = {
      v: "prop1 from ParentCtrl"
    };
    $scope.prop1 = {
      v: "defined on the scope by ParentCtrl"
    };
  })
  .controller("Child1Ctrl", function($scope) {})
  .controller("Child2Ctrl", function($scope) {
    //here, I don't know about the "pc" alias
    this.myProp = $scope.prop1.v + ", and changed by Child2Ctrl";
  });

    HTML:

    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.min.js"></script>

<body ng-app="myApp">
  <div ng-controller="ParentCtrl as pc">
     <div ng-controller="Child1Ctrl">
        <div>I know about the "pc" alias: {{pc.prop1.v}}</div>
     </div>
     <div ng-controller="Child2Ctrl as ch2">
       <div>I only care about my own ViewModel: {{ch2.myProp}}</div>
    </div>
  </div>

    • Alors, êtes-vous ce qui revient à dire qu'il n'est pas possible d'accéder à un parent de la portée à l'intérieur d'un enfant lors de l'utilisation de "contrôleur"? Je ne considère pas l'approche répertoriés par les OP ($scope.$parent.pc.nom) pour être réalisable.
    InformationsquelleAutor New Dev
  2. 7

    Vous devriez faire comme :

    html

    <div ng-controller="ChildController as child">
    <button type="button" ng-click="child.sayMe()">Say me!</button>
</div>

    js

    var app = angular.module('myApp', [])
app.controller('BaseController',function() {
    this.me = 'Base';
    this.sayMe= function() {
        alert(this.me);
    }
});
app.controller('ChildController', function($scope, $controller) {
    var controller = $controller('BaseController as base', {$scope: $scope});
    angular.extend(this, controller);
    this.me = 'Child';
});

    prendre un coup d'oeil à https://docs.angularjs.org/guide/controller

    • Mon intention (désolé, si il n'a pas été correctement transmis) a été de ne pas hériter d'un contrôleur de base, mais plutôt pour hériter de la portée. Je ne veux pas savoir qui contrôleur de parent est-il - je veux juste compter sur la portée (comme pour mon premier exemple).
    • ok donc la seule façon que je sais, c'est à l'aide de $parent.$portée ou $rootScope
    • il a été vraiment utile. Une question sur cette. Quel est le besoin de mettre des 'BaseController comme base' ici? Je peux simplement faire "BaseController' droite puisque de toute façon, le but est d'hériter des propriétés/méthodes. S'il vous plaît corrigez-moi si je me trompe
    • si vous n'utilisez pas le 'contrôleur' la syntaxe, vous pouvez le faire sans aucun problème "BaseController'
    InformationsquelleAutor Whisher
  3. 1

    Pour ceux qui cherchent à accéder simplement à la portée parent par programmation, utilisez la $scope service, de trouver de la portée parent, d'accès et le nom utilisé pour le parent du controllerAs, par exemple:

    $scope.$parent.someName.doSomething();

    InformationsquelleAutor Adam Reis