javascript - 在服务中使用 Angular $http 触发 ng-click

Question

我目前正在使用 Angular 1.3.14，我想在单击链接时使用 $http 发出请求。我试图将 $http 请求放在一个服务中，这样它就不会绑定(bind)到任何一个 Controller ，并且可以被多个 Controller 访问。我创建了两个函数 sayHello() 和 getData()。我希望每个人在单击时都能看到 console.log。只有 sayHello() 函数可以，但 getData() 函数不行。这是我不明白的地方。

1. 为什么 $http 请求在加载时触发，而不是在点击时触发，而 sayHello 函数却完美运行？

2. 如何修改我的代码以使其按预期工作？

   <p><a href="#" ng-click="getData()">Console Log Our Data</a></p>
   <p>
     <a href="#" ng-click="sayHello()">Console Log The Word "Hello"</a></p>
   

   var app = angular.module('myApp', [])
   
   .controller('mainCtrl', function($scope, dataService){
   
   $scope.sayHello = dataService.sayHello;
   
   $scope.getData = dataService.getData(function(response){
           $scope.myData = response.data;
       console.log($scope.myData);
       });
   })
   .service('dataService', function($http){
   
   this.getData = function(callback){
         $http.get('http://jsonplaceholder.typicode.com/posts')
           .then(callback);
       }
   
     this.sayHello = function(){
       console.log("Hello!");
     }
   
   
   });
   

Codepen 供引用 http://codepen.io/benweiser/pen/remvvo/

Answer 1

那是因为$scope.getData在应该是函数的时候等于undefined

$scope.getData = function () {
  dataService.getData(function(response) {
     $scope.myData = response.data
     console.log($scope.myData)
  })
}

---

更新:您可以从对方法的调用或从方法本身发送参数，假设您有以下输入

<input ng-model="name">

然后您可以使用发送值并在您的服务中使用它，如下所示

<a ng-click="getData(name)">get data</a>

$scope.getData = function (name) {
  dataService.getData(name)
     .then(function (response) { ... })
}

或者直接在controller中使用

<a ng-click="getData()">get data</a>

$scope.getData = function () {
  dataService.getData($scope.name)
     .then(function (response) { ... })
}

请注意，两者都假定 dataService.getData() 返回一个 promise 而不是传递回调，因此如果您想像上面那样编写代码，您还需要对您的服务执行以下操作

this.getData = function (name) {
  // do something with name
  return $http.get('http://jsonplaceholder.typicode.com/posts/' + name)
}

您应该阅读更多关于 Promises 与回调以及如何利用它们的信息:)