Javascript 在服务中使用$http在ng click上启动

我目前正在使用Angular 1.3.14，我希望在单击链接时使用$http发出请求。我试图将$http请求放在服务中，这样它就不会绑定到任何一个控制器，并且可以被多个控制器访问。我创建了两个函数sayHello（）和getData（）。我希望在单击时将每个文件都保存到console.log。只有sayHello（）函数可以，但getData（）函数不能。。这是我不明白的

为什么$http请求在加载时启动，而不是在单击时启动，而sayHello函数工作得很好

如何修改代码使其按预期工作

进行此操作时，请输入代码以供参考

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

})

立即执行dataService.getData。因此，$scope.getData被设置为承诺，而不是您想要绑定到的函数

将此行$scope.getData=dataService.getData更改为以下内容，这将实际设置一个回调为$scope.getData的函数

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

---

这是因为

$scope.getData

在应该是函数时等于未定义

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

---

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

<input ng-model="name">

---

你应该阅读更多关于承诺与回扣以及如何利用它们的内容：）

我会尝试这样做。应该很容易应用于上面的代码

//in your factory
app.factory('dataFactory',function($http){

    factory = {};

    //get data
    factory.getData = function(obj){
        return $http({
            method: 'GET',
            url: 'http://jsonplaceholder.typicode.com/postsn'
        })
    };

    return factory
}); 

//in your controller
app.controller(someCtrl,function($scope,dataFactory){

  dataFactory.getData().then(function(data){
      console.log('This will be your data: ', data)
  })

})

---

Ajax查询是在控制器首次加载时进行的。您与“getData”的绑定不是与函数绑定，而是与ajax调用绑定，这就是它没有被触发的原因

此重构适用于codepen：

'use strict';

var app = angular.module('myApp', [])

.controller('mainCtrl', function($scope, dataService){

    $scope.sayHello = dataService.sayHello;

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

.service('dataService', function($http){

    this.getData = function(callback){
        return $http.get('http://jsonplaceholder.typicode.com/posts');
    }

    this.sayHello = function(){
        console.log("Hello!");
    }

});

主要更新：

$scope.getData绑定到函数，而不是Ajax调用/承诺

承诺不在服务范围内（欢迎提供更好的解决方案：-）

dataService.getData作为函数调用。（以其他方式不起作用）

---

谢谢你，这工作做得很好。我想投票，但没有资格。我是否可以使用此方法传递参数？假设我想从输入中的ng模型获取数据，并通过服务中的URL传递数据？或者这是一个更好的控制器用例？示例？答案更新，您应该继续阅读BenWeiser的基础知识，与Maurcio的方法相比，这有什么优点或缺点？

this.getData

在OP示例中返回未定义，不是承诺谢谢你我还不太明白我要做的是什么工厂我必须去看文件才能明白这是一项服务。

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

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

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

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

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

//in your factory
app.factory('dataFactory',function($http){

    factory = {};

    //get data
    factory.getData = function(obj){
        return $http({
            method: 'GET',
            url: 'http://jsonplaceholder.typicode.com/postsn'
        })
    };

    return factory
}); 

//in your controller
app.controller(someCtrl,function($scope,dataFactory){

  dataFactory.getData().then(function(data){
      console.log('This will be your data: ', data)
  })

})

'use strict';

var app = angular.module('myApp', [])

.controller('mainCtrl', function($scope, dataService){

    $scope.sayHello = dataService.sayHello;

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

.service('dataService', function($http){

    this.getData = function(callback){
        return $http.get('http://jsonplaceholder.typicode.com/posts');
    }

    this.sayHello = function(){
        console.log("Hello!");
    }

});