Angulaire “controllerAs” ne fonctionne pas en routeProvider

Je suis en train d'utiliser le controllerAs propriété sur un $routeProvider route sans succès.

Voici un exemple de code:

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

app.config(['$routeProvider', '$locationProvider',
  function($routeProvider) {
  $routeProvider
    .when('/', {
      template:'<div>This should be visible:{{ ctrl.one }}</div><div>This should not:{{ one }}</div>',
      controller: 'Ctrl',
      controllerAs: 'ctrl',
    });
}]);

app.controller('Ctrl', function($scope) {
  $scope.one = 'actual';
});

Ne sais pas si c'est un bug ou je fais quelque chose de mal, C'est un plnkr qui illustre le problème

OriginalL'auteur thanpolas | 2014-08-14

angularjs angularjs-routing

15

Problème réel:

Vous semblez être à l'aide de controllerAs (attribution d'une valeur de 'ctrl'), à l'origine, mais plus tard de ne pas l'utiliser dans le reste de votre code. (que vous avez utilisé $scope)

Solution:

Travail de démonstration selon votre échantillon

Quand j'ai été en utilisant le controllerAs syntaxe, vous devez utiliser le modèle suivant(s) pour obtenir l'accès à l'instance du contrôleur:

Par opposition à l'ajout de la propriété de $scope, vous devez lier le contrôleur de portée. Remarque c'est différent de $scope. Par manque d'un meilleur terme, vous devez lier le contrôleur lui-même (il pense que son contexte). Comme nous avons affaire avec l'affichage de la couche ou de la vue du modèle, j'ai tendance à utiliser var vm = this; de la convention, mais cette préférence personnelle.

[A]: La Solution Préférée De
```
app.controller('Ctrl', function() {        
    this.one = 'actual';  
});

//or using 'vm' convention

app.controller('Ctrl', function() {
    var vm = this;
    vm.one = 'actual';  
});
```
[B]
```
app.controller('Ctrl', function() {
    var vm = {};
    vm.one = 'actual';
    return vm;
});
```
Explication:

Quand j'ai commencé à utiliser Angulaire, [B] est l'approche que j'ai utilisée, purement à venir à partir d'un knock-out de fond. J'ai été utilisé pour la liaison à un "conteneur" de l'objet, puis la liaison de l'objet à la vue. Cela étant dit, je préfère utiliser [A], ou ajouter directement à $scope et de renoncer à l'alias complètement. Raisons:
- Je sens sa nettoyant ITO lisibilité
- @Swordfish0321 a déclaré, [A] est plus performant (doit-il être un sujet de préoccupation pour vous)
- J'ai eu des problèmes de liaison avec des directives sur mesure, j'ai écrit que, lorsque dépendante de certains parents propriétés de l'étendue (spécifique à ma base de code)
Juste visuel:

Démo
```
 app.controller('Ctrl', function($scope) {
      var vm = this;
      vm.one = 'actual'; 
      console.log($scope) 
 });
```
Passant dans le $scope de l'objet et de la poursuite de l'inspection, vous verrez une nouvelle ctrl enfant de l'objet contenant la totalité de vos biens publics et de fonctions qui a été liée à vm à l'intérieur du contrôleur de code. C'est parce que vous avez attribué var vm = this. Sens de la vm objet dans le code de référence du contrôleur de domaine, ce qui est finalement lié à la vue. controllerAs essentiellement des groupes de toutes les propriétés et les fonctions internes du contrôleur à un nouvel objet nommé d'après l'alias que vous avez fournis.

Pourquoi ai-je besoin de changer de modèle pour créer un contrôleur? Ce n'est pas le cas lorsque "" est utilisé en ligne dans le balisage à l'aide de: ng-controller="Ctrl as ctrl" ce qui se passe ici?
Lorsque vous utilisez inline ng-controller="myController comme une machine virtuelle", vous avez encore besoin de faire la même chose que mes 2 exemples ci-dessus. Nous n'utilisons pas de l'interface utilisateur du routeur sur l'un de nos projets, et la même chose s'applique. Personnellement, je n'ai pas disparu dans les tripes de pourquoi (Encore new-ish angulaire moi-même). Mon hypothèse est que le contrôleur crée l' $de la portée de la vue, et à l'aide de la controllerAs vous limitez que le point de vue se lie/a accès. Par exemple, la vm/ctrl objet que vous avez retourné devra être imbriquées à l'intérieur de l'original $portée... si cela fait sens. Je vais poster une petite mise à jour de ma réponse à montrer ce que je veux dire.

OriginalL'auteur Rohan Büchner
3

Pour être clair, je ne pense pas que la réponse a été acceptée explicite--le problème avec votre exemple est que, même si vous assignez une valeur à controllerAs vous êtes en contournant il en est encore à l'aide de $scope.

La "vm" approche pour vue-modèle qui n'est qu'une convention, mais l'OMI est beaucoup plus représentatif de ce qui se passe réellement sur que "$champ d'application". Tout ce que nous essayons vraiment de faire ici est de lier la vue du modèle de vue.

Cela étant dit vous pouvez utiliser techniquement à la fois controllerAs ET normale $portée en même temps plunk.

En outre, la différence entre Rohan exemples A et B est que l'Un est la façon dont vous devriez le faire parce que vous êtes en mesure de tirer parti du JavaScript prototypes de l'héritage qui est propice à une meilleure perf. Il est également intéressant de noter que parce que vous êtes maintenant à l'aide de controllerAs et ce vous n'avez plus besoin d'injecter $scope.
```
//Functioning Example    
var app = angular.module('app', ['ngRoute']);

app.config(['$routeProvider', '$locationProvider',
  function($routeProvider) {
  $routeProvider
    .when('/', {
      template:'<div>This should be visible:{{ vm.one }}</div><div>This should not:{{ one }}</div>',
      controller: 'Ctrl',
      controllerAs: 'vm',
    });
}]);

app.controller('Ctrl', function() {
  this.one = 'actual';
});
```
merci pour la clarification & reformuler ma réponse. TBH quand j'ai répondu à l'origine... j'ai répondu à partir d'un POV de ce qui a fonctionné pour moi... aussi un peu Angulaire novice à ce stade, j'ai peut-être manqué l'occasion d'expliquer les choses un peu mieux (AH! pour avoir la puissance de plus de temps et de recul). J'aime aussi à penser que je suis un continu de l'apprenant de toutes choses, JavaScript, j'ai vraiment beaucoup appris un peu de votre réponse, ITO phrasé d'une solution d'une certaine manière... cela étant dit, est-il vraiment la peine de le voter?
Hey Rohan, np. J'ai moi-même essayer d'apprendre de manière continue. Votre réponse originale à cette question était assez bavard et n'a en réalité pas de réponse de la Fpo réel problème, c'était la raison de la baisse de vote. Puisque vous êtes le maintien de la réponse afin de l'améliorer, cependant, j'ai de l'onu-downvoted. J'espère que ça a du sens!

OriginalL'auteur Scott Sword
2

La controllerAs est un alias pour la commande exemple, si vous souhaitez l'utiliser, vous devez stocker les données dans l'instance du contrôleur this au lieu de $scope:
```
app.controller('Ctrl', function($scope) {
  var ctrl = this; //assign to a variable to be consistent when using in the template
  ctrl.one = 'actual';
});
```
Exemple Plunker: http://plnkr.co/edit/r8AYtSKbiLQAaPBPriRp?p=preview

OriginalL'auteur runTarm
1

Si vous travaillez avec $scope, vous aurez à return $scope à la fin de la fonction pour le controllerAs la syntaxe de la fonction.
```
app.controller('Ctrl', function($scope) {
    $scope.one = 'actual';

    //return $scope
    return $scope;
});
```
Bonne Chance.

OriginalL'auteur Akash

Vous devez vous connecter pour publier un commentaire.