AngularJSで.controllerメソッドを使用すると$ locationにアクセスできない

Question

フォーム上でng-submitを使用してデータをFirebaseにプッシュすると、すべて正常に動作します。私がしたいのは、同時にビューを変更することです。送信ボタン自体では、$ locationを使って関数を実行するためにng-clickが設定されています。私がchangeView関数を.controllerメソッドに配置すると、$ locationを利用できません（具体的には、「エラー： '未定義'はオブジェクトではありません（$ 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> 

Answer 1

あなたのコントローラに$locationオブジェクトを注入していません。それはあなたの関数のパラメーターにリストされていますが、その関数の前にリストに追加するのを忘れてしまいました。

Answer 2

私はこれをやっていたとは信じられません。 #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'); 
     }); 

    }; 

    } 
); 

注目すべき変更点：

1. 私はDIのためのアノテーションを使用していないよ、私はOFFL oadこれをng-annotateにして、最初にこの質問をしたときに遭遇したような問題を緩和します。
2. 私は、この質問の時点では存在しなかった 'controller as'構文を使用しています。
3. 2つの別々の機能を1つのイベントで2つの別々の機能で実行しようとすると、もう奇妙な競合状態が発生することはもうありません。約束はこのような行動のための完璧な解決策です。

Answer 3

また、あなたの行動に$の場所を追加することを忘れないでください：

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

     }); 
    }; 
}]);