web-dev-qa-db-fra.com

Impossible d'accéder à $ location lors de l'utilisation de la méthode .controller dans AngularJS

J'utilise ng-submit sur un formulaire pour transférer des données vers une base Firebase, tout fonctionne comme prévu. Ce que je voudrais faire, c’est changer de vues en même temps. Sur le bouton d'envoi, j'ai configuré ng-click pour exécuter une fonction à l'aide de $ location. Si je place ma fonction changeView dans une méthode .controller, je ne peux pas utiliser $ location (plus précisément, il indique - "Erreur:" non défini "n'est pas un objet (évaluation de" $ location.path ")"). Toute aide serait super duper.

// This doesn't work and throws the error
myApp.controller('CtrlName', ['$scope', 'angularFireCollection',
    function($scope, angularFireCollection, $location) {

         $scope.changeView = function(view) {
             $location.path(view);
         }

    }
]);



// This works as expected, but I'm name spacing my functions globally and I will have to change how I'm accessing my Firebase, which isn't really desired.   
function CtrlName($scope, angularFireCollection, $location) {

    $scope.changeView = function(view) {
        $location.path(view);
    }

}

Voici mon modèle:

<form role="form" ng-submit="tactics.add(tactic)">
    <div class="form-group">
        <label>Select Method</label>
            <select class="form-control" ng-model="tactic.type">
                <option>Email</option>
                <option>Display</option>
            <option>SMS</option>
            <option>Print</option>
        </select>
    </div>
    <button type="submit" class="btn btn-success" ng-click="changeView('/my-tactics')">Save</button>
</form>
angularjscontrollerfirebaseangularfire
14
Scott Sword

Vous n'injectez pas l'objet $location dans votre contrôleur. Il est répertorié dans les paramètres de votre fonction mais vous avez oublié de l'ajouter à la liste avant cette fonction.

myApp.controller('CtrlName', ['$scope', 'angularFireCollection','$location',
    function($scope, angularFireCollection, $location) {
        ...
    }]);
36
m.e.conroy

N'oubliez pas non plus d'ajouter $ location dans votre action:

authControllers.controller('AuthRegisterCtrl', ['$scope', '$http', '$location',

function ($scope, $http, $location) {

    $scope.master = {};

    $scope.save = function (user) {
        $scope.master = angular.copy(user);
        $http({
            method: 'POST',
            url: '/angular/auth/register',
            data: user
        }).success(function (d) {
             $location.path('/login');

        });
    };
}]);
4
Vadim

Sainte vache, je ne peux pas croire que je le faisais jamais. #Facepalm. Voici la bonne façon de rediriger une soumission de formulaire.

Modèle 

<form role="form" ng-submit="vm.submit(tactic)">
    <div class="form-group">
        <label>Select Method</label>
            <select class="form-control" ng-model="tactic.type">
                <option>Email</option>
                <option>Display</option>
            <option>SMS</option>
            <option>Print</option>
        </select>
    </div>
    <button type="submit" class="btn btn-success">Save</button>
</form>

Manette  

angular.module('MyApp')
  .controller('CtrlName', function($scope, $location, $log, angularFireCollection, tactics) {

  var vm = this;

  vm.submit = function submit(item) {

    tactics.add(item)
      .then(function(rsp) {
        $log.debug('Attempted to add tactic to Firebase', rsp);
        $location.path('/my-tactics');
      });

  };

  }
);

Changements notables:

  1. Je n'utilise pas d'annotations pour ma DI, je la délègue à ng-annotate, ce qui atténue ensuite les problèmes tels que celui que j'ai rencontré lors de la première question.
  2. J'utilise «contrôleur comme» syntaxe qui n'existait pas au moment de cette question.
  3. Je ne crée plus d'étrange condition en essayant d'exécuter deux actions distinctes dans deux fonctions distinctes sur éventuellement un événement. Les promesses sont une solution parfaite pour ce genre d'action.
1
Scott Sword