Javascript 将数据从输入字段传递到角度工厂中的$http.get

我希望能够将用户输入值从控制器中触发的submit按钮传递到工厂，工厂将这些值作为变量存储到$http.get（）请求中。如何将此值从控制器传递到服务？我这样做对吗

控制器 工厂 html

输入电话号码：
开始

您的控制器不需要jQuery，最好不要使用它并学习角度方法

HTML:

---

如果您正在尝试和角度方法，您只需抛弃jQuery并从表单/输入中提取，这就是ng模型的用途。另外，我认为你们的工厂有点走火入魔了，它真的有效吗？好的，我会深入研究ng模型。当我写这篇文章时，我在想。是的，它起作用了。我必须使用$http而不是$resource，因为我需要传递Base64编码。我将很快发布更具体的答案。。这对我来说更有意义。延迟对象和.then（）方法比使用.success和.error要好得多。我以前确实有一个方法返回，但它对我不起作用。在上面的代码中，控制器或服务中未使用sendData。它应该放在哪里？我也不确定successResponse和failureResponse参数是在哪里创建的，以及它们是否真的需要。我现在正在做这件事，一旦我解决了这篇文章或更深入的问题、评论、担忧，我会更新它。我的错误是，它应该使用sendData，在上面的控制器中更正。谢谢你的帮助SoluableNonagon。这帮我翻过了一堵我已经撞了一段时间的墙。没问题，有些指南甚至有比这更好的例子。不幸的是，以各种方式使用服务、工厂和提供者的，并没有太多的指南说明如何从jQuery过渡到Angular

'use strict';
angular.module('myApp')
.controller('phoneSubmitController', function($http, phoneService) {
 $scope.submitPhone = function(data) {
  phoneService.then(function(data) {
    var phone  = $('#phone_number').val();
    var phone1 = phone.substring(1,4);
    var phone2 = phone.substring(5,8);
    var phone3 = phone.substring(9,13);
    $scope.JAWN = data;
  });
  };
});

angular.module('myApp')
.factory('phoneService', function($http) {
var promise = $http.get('http://dev.website.com:8080/api/get?areacode=' + phone1 + '&exchange=' + phone2 + '&lastdigits' + phone3, {
  headers: {
    'Authorization': "Basic " + Base64.encode("Allen" + ":" + "Iverson1"),
    'Content-Type': 'application/json'
  },
  contentType: 'application/json',
  data: angular.toJson(JAWN),
  cache: false
})
.success(function(data) {
  console.log('success = ' + this);
  JAWN = data;
})
.error(function($log) {
  console.log($log);
});
return promise;
});

<div id="phone-wrapper">
    <h4>Enter a phone number:</h4>
    <label for="phone_number">
      <input type="text" id="phone_number" ng-model="data.phone" ui-mask="(***)***-****" placeholder="(___)___-____"/>
    </label>
    <div class="row"></div>
    <button class="btn btn-lg btn-primary scrollTop" type="submit" id="submitPhone" value="Submit" ng-disabled="phoneForm.$invalid">Start</button>
    <br/>
  </div>

<input type="text" id="phone_number" ng-model="myInput.phone" ui-mask="(***)***-****" placeholder="(___)___-____"/>

// inject $scope into controller, otherwise your ng-model is useless in your html
.controller('phoneSubmitController', function($scope, $http, phoneService) {

    $scope.myInput = {
        phone: ""
    };
    $scope.submitPhone = function() { // no need to pass anything into here

        // your phone service should take an input param, right? and send that number out?
        phoneService.sendData($scope.myInput.phone).then(function(successResponse) {
            console.log(successResponse);
        }, function(failureResponse){
            console.log(failureResponse);
        });
    };
});

angular.module('myApp').factory('phoneService', function($http, $q) { // inject $ as well for use of promises
    var JAWN = null;
    // the factory is a singleton which is reusable, it can be called any time to send data, given an input
    return {
        sendData: function(phoneNumber){
            var deferred = $q.defer(); // create a deferred object (think promise, this will either fail or succeed at some point)

            var phone1 = phoneNumber.substring(1,4);
            var phone2 = phoneNumber.substring(5,8);
            var phone3 = phoneNumber.substring(9,13);

            $http.get('http://dev.website.com:8080/api/get?areacode=' + phone1 + '&exchange=' + phone2 + '&lastdigits' + phone3, {
                headers: {
                    'Authorization': "Basic " + Base64.encode("Allen" + ":" + "Iverson1"),
                    'Content-Type': 'application/json'
                },
                contentType: 'application/json',
                data: angular.toJson(JAWN),
                cache: false
            })
            // handle some success/error here, like logging, and if needed in your controller as well
            .then(function(successResponse){ // handle success in factory
                console.log('success', successResponse);
                deferred.resolve(successResponse); // mark it as successful
                JAWN = data; 

            }, function(errorResponse){ // handle failure in factory
                console.log('failure', errorResponse);
                deferred.reject(errorResponse); // mark it as failed
            });

            return deferred.promise; // return a promise

        }, someOtherFunction: function(someData){
               // use some other http call as phoneService.someOtherFunction(some Input Data);
               return $http.get('someOtherURL', someData);
        }
    };

});