在$ scope定义的方法中使用工厂?

时间:2017-06-15 14:35:36

标签: javascript angularjs ionic-framework

我是AngularJSIonic的新手,但我从离子1 ATM开始。我正在尝试在我的控制器中为登录视图页面定义一个函数,该页面仅在单击submit方法时激活。使用指令我发现它的外观如下:

    <ion-view title="Login" id="page5">
      <ion-content padding="true" class="has-header">
        <h4 id="login-heading8" style="color:#000000;font-weight:400;">Por favor introduzca su teléfono:</h4>
        <form ng-submit="send()" id="login-form1" class="list">
          <ion-list id="login-list1">
            <label class="item item-input" id="login-input1">
              <span class="input-label">Teléfono:</span>
              <input type="tel" placeholder="" ng-model="formData.phoneNumber">
            </label>
          </ion-list>
          <div class="spacer" style="height: 40px;"></div>
          <input value="Acceder" type="submit" id="login-button1" style="border-radius:1px 1px 1px 1px;" class="button button-positive button-block">
        </form>
      </ion-content>
    </ion-view>

所以我找到的唯一方法就是在$scope内部实际创建一个新函数,否则即使我还没有点击我的按钮,它也总会调用我的函数。所以控制器看起来像这样:

    .controller('loginCtrl', ['$scope', '$stateParams', 'httpService', 
    function ($scope, $stateParams, httpService) {
      $scope.formData = {phoneNumber : ""};
      $scope.send= function(httpService){
        httpService.getCall("http://localhost:8000/Hermerest/web/app_dev.php/api/parents?telephone=" + $scope.formData, loginCtrlCallback);
      }
    }])

正如您所看到的,我正在尝试使用我已定义的工厂方法来避免反复使用相同的代码,但是通过参数向$scope.send()注入httpService似乎不起作用它似乎未定义。 这是我在工厂的代码:

    .factory('httpService', function($http){
      return {
        getCall: function(url, callback){
          $http.get(url)
            .success(function (response) {
              alert(response);
              //callback(response);
            })
        },

        postCall: function(url, data, callback){
          $http.post(url, data)
            .success(function (response) {
              alert(response);
              //callback(response);
            })
        }
      }
    })

因为我是新手,我可以接受任何我可以尝试的建议或解决方法,提前谢谢你们!

2 个答案:

答案 0 :(得分:1)

您不需要将httpService添加为函数参数。它在您的控制器中可用,因为您已将其作为依赖项注入。

所以简单地这样做:

 $scope.send= function(){
    httpService.getCall("http://localhost:8000/Hermerest/web/app_dev.php/api/parents?telephone=" + $scope.formData, loginCtrlCallback);
  }

答案 1 :(得分:0)

首先,从控制器而不是工厂获取承诺。并且不需要使用回调,因为promise将数据返回到控制器。

还需要从工厂返回$http

 getCall: function(url){
   return $http.get(url);
 }
在控制器中使用then代替success。它从角度1.4开始被弃用

.controller('loginCtrl', ['$scope', '$stateParams', 'httpService', 
    function ($scope, $stateParams, httpService) {
      $scope.formData = {phoneNumber : ""};
      $scope.send= function(){
        httpService.getCall("http://localhost:8000/Hermerest/web/app_dev.php/api/parents?telephone=" + $scope.formData)
         .then(function (response) {
            alert(response.data); 
          })
      }
 }])