web-dev-qa-db-ja.com

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

フォームでng-submitを使用してデータをFirebaseにプッシュしていますが、すべて期待どおりに機能しています。同時に見方を変えたい。送信ボタン自体で、$ locationを使用して関数を実行するようにng-clickを設定しています。 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>
angularjscontrollerfirebaseangularfire
14
Scott Sword

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

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

また、アクションに$ 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');

        });
    };
}]);
4
Vadim

聖なる牛こんなことをしたなんて信じられない。 #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に注釈を使用していません。これをng-annotateにオフロードします。これにより、最初にこの質問をしたときに遭遇した問題のような問題が軽減されます。
  2. この質問の時点では存在していなかった「コントローラーの名前」構文を使用しています。
  3. おそらく1つのイベントで2つの別々の関数で2つの別々のアクションを実行しようとして、奇妙な競合状態を作成しなくなりました。約束は、この種の行動の完璧な解決策です。
1
Scott Sword