Не удается получить доступ к $location при использовании метода .controller в AngularJS

Я использую ng-submit в форме для ввода данных в Firebase, все работает так, как ожидалось. То, что я хотел бы сделать, - это изменение взглядов одновременно. На самой кнопке отправки я установил ng-click для выполнения функции с помощью $location. Если я помещаю функцию changeView в метод .controller, я не могу использовать $location (в частности, он говорит - "Ошибка:" undefined "не является объектом (оценка" $location.path ")" ). Любая помощь будет супер пупер.

// 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);
    }

}

Вот мой шаблон:

<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>

Ответы

Ответ 1

Вы не вводите объект $location в свой контроллер. Он указан в параметрах вашей функции, но вы забыли добавить его в список перед указанной функцией.

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

Ответ 2

Также не забудьте добавить $location в ваше действие:

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');

        });
    };
}]);

Ответ 3

Святая корова, я не могу поверить, что я когда-либо делал это. #Facepalm. Вот правильный способ перенаправления при отправке формы.

Шаблон

<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>

Контроллер

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');
      });

  };

  }
);

Заметные изменения:

  • Я не использую аннотации для своего DI, я выгружаю это в ng-annotate, а затем смягчает любые проблемы, такие как тот, с которым я столкнулся, когда задавал этот вопрос.
  • Я использую синтаксис "контроллер как", который не существовал во время этого вопроса.
  • Я больше не создаю какое-то странное состояние гонки, пытаясь выполнить два отдельных действия в двух отдельных функциях, возможно, в одном событии. Promises являются идеальным решением для такого рода действий.