Không thể truy cập vào vị trí $ khi sử dụng phương thức .controller trong AngularJS

Question

Tôi đang sử dụng ng-submit trên biểu mẫu để đẩy dữ liệu vào Firebase, mọi thứ hoạt động như mong đợi. Những gì tôi muốn làm là thay đổi quan điểm cùng một lúc. Trên chính nút gửi, tôi có ng-click được thiết lập để thực thi một hàm bằng cách sử dụng $ location. Nếu tôi đặt hàm changeView của tôi trong một phương thức .controller, tôi không thể sử dụng $ location (cụ thể, nó nói - "Error: 'undefined' không phải là một đối tượng (đánh giá '$ location.path')"). Bất kỳ sự trợ giúp nào sẽ là siêu 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); 
    } 

} 

Đây là mẫu của tôi:

<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

Bạn không tiêm đối tượng $location vào điều khiển của bạn. Nó được liệt kê trong các tham số chức năng của bạn nhưng bạn quên thêm nó vào danh sách trước khi nói chức năng.

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

Answer 2

Tôi không thể tin rằng tôi đã từng làm việc này. #Facepalm. Đây là cách thích hợp để chuyển hướng trên một biểu mẫu gửi.

Template

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

khiển

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

    }; 

    } 
); 

Những thay đổi đáng chú ý:

1. tôi không sử dụng các chú thích cho DI tôi, tôi offl oad này để ng-chú thích, mà sau đó giảm nhẹ bất kỳ vấn đề như một trong tôi chạy vào khi ban đầu yêu cầu câu hỏi này.
2. Tôi đang sử dụng cú pháp 'điều khiển dưới dạng' không tồn tại tại thời điểm câu hỏi này.
3. Tôi không còn tạo ra một số điều kiện đua kỳ lạ bằng cách cố gắng thực hiện hai hành động riêng biệt trong hai chức năng riêng biệt trên một sự kiện có thể. Lời hứa là một giải pháp hoàn hảo cho loại hành động này.

Answer 3

Cũng đừng quên để thêm $ vị trí vào hành động của bạn:

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

     }); 
    }; 
}]);