Angular - 在控制器函数中使用 $http 服务

Question

伙计们——所以在我持续的 Angular 冒险中，我运行遇到了一个问题，其中 $http.get 对我有用，但 $http.post不是。这显然是一个范围问题（即，我的控制器函数看到“$http”，但它的一个函数不能。到目前为止，这是我的代码：

var app = angular.module('docManager', []);
app.controller('DocManCtrl', ['$http', DocManCtrl]);

function DocManCtrl($http){
  var self = this;
  $http.get('http://localhost:3000/documents').success(function(data){
    self.documents = data;
    }).error(function(){
    console.log('Error: could not GET documents');
  });
}

DocManCtrl.prototype.addDoc = function(){
  var self = this;
  self.documents.push({filename: this.filename, category: this.category});
  $http.post('http://localhost:3000/documents', self.documents).success(function(data){
  console.log('document posted.');
  }).error(function(){
  console.log('document not posted');
  });
};

我的 HTML 页面通过 $http.get 方法显示所有记录，但是控制器的 'addDoc' 方法（由表单提交触发）导致 '$http not defined ' 当我尝试 post 数据到我的后端时出错。那么——如何将 $http 注入到我的 addDoc 方法中？

谢谢！布莱恩

Answer 1

如果您真的想将控制器与实例方法一起使用，则必须在自身上创建对注入服务的引用：

var app = angular.module('docManager', []);
app.controller('DocManCtrl', ['$http', DocManCtrl]);

function DocManCtrl($http) {
  var self = this;
  self._http = $http; // <== For use in instance methods.

  self.documents = [];
  $http.get('http://localhost:3000/documents').success(function(data) {
    self.documents = data;
  }).error(function() {
    console.log('Error: could not GET documents');
  });
}

DocManCtrl.prototype.addDoc = function() {
  var self = this;
  self.documents.push({
    filename: this.filename,
    category: this.category
  });
  self._http.post('http://localhost:3000/documents', self.documents).success(function(data) {
    console.log('document posted.');
  }).error(function() {
    console.log('document not posted');
  });
};

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<div ng-app='docManager' ng-controller='DocManCtrl as vm'>
  <button ng-click="vm.addDoc()">Add Doc</button>
</div>

参考资料如下：

Angular - 在控制器函数中使用 $http 服务

Angular - Using $http Service in Controller Function

angularjs

angularjs-service