搜尋

首頁  >  問答  >  主體

angular.js - 關於angularjs中呼叫服務的方法的問題

我想提交頁面的表單數據,透過ng-submit來呼叫controller中註入的service的方法。但是請求的url不正確。沒有呼叫到正確的service

頁如下:

<!DOCTYPE html>
<html lang="en" ng-app="binding">

<head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"/>
    <title>Kindle Binding</title>
</head>

<!-- Loading Bootstrap -->
<link href="/css/bootstrap/css/bootstrap.min.css" rel="stylesheet"/>

<!-- Loading Flat UI -->
<link href="/css/flat-ui.css" rel="stylesheet"/>

<link href="/imgs/favicon.ico" rel="shortcut icon"/>

<script src="/js/lib/jquery.min.js"></script>
<script src="/js/lib/flat-ui.min.js"></script>
<script src="/js/lib/application.js"></script>
<script src="/js/lib/angular-1.3.0.js"></script>
<script src="/js/lib/angular-ui-router.js"></script>
<script src="/js/controller/bindingController.js"></script>
<script src="/js/services/request.js"></script>

<style>
      body {
       <!-- min-height: 2000px;-->
        width: 100%;
        height:100%;
        overflow-x: hidden;
      }

      .navbar-static-top {
        margin-bottom: 19px;
      }

</style>

<script>
      $(function () {
        $('[data-toggle=tooltip]').tooltip();

        //ensure the tooltip will not display immediatly when the page opened.
        $('.tooltip-hide').tooltip('hide');
      });
</script>


<body>


<p class="navbar navbar-default navbar-static-top" role="navigation">
    <p class="container">
        <p class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="sr-only">Toggle navigation</span>
            </button>
            <a class="navbar-brand" href="#">Kindle Pocket</a>
        </p>
        <p class="navbar-collapse collapse">
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#">登陆</a></li>
            </ul>
        </p><!--/.nav-collapse -->
    </p>
</p>

<p class="login">
    <!-- <p class="login-screen">-->
    <form class="login-form" name="bindingForm" ng-controller="formController" novalidate ng-submit="submitForm()">

        <p class="form-group">
            <input type="text" class="form-control login-field tooltip-hide" value="" placeholder="请输入手机号"
                   id="binding-phone" name="phone" ng-model="bindingData.phone" ng-minlength="11" ng-maxlength="11"
                   required data-placement="top" data-toggle="tooltip"
                   title="**"/>
            <label class="login-field-icon fui-user" for="binding-phone"></label>
        </p>

        <p class="form-group">
            <input type="text" class="form-control login-field tooltip-hide" value="" placeholder="请输入用户名"
                   id="binding-userName" name="userName" ng-model="bindingData.userName" ng-minlength="5" ng-maxlength="20"
                   required data-placement="top" data-toggle="tooltip"
                   title="**"/>
            <label class="login-field-icon fui-user" for="binding-userName"></label>
        </p>

        <p class="form-group">
            <input type="email" class="form-control login-field tooltip-hide" value="" placeholder="请输入个人邮箱"
                   id="binding-email" name="email"
                   ng-model="bindingData.email" required data-placement="top" data-toggle="tooltip"
                   title="**"/>
            <label class="login-field-icon fui-mail" for="binding-email"></label>
        </p>

        <p class="form-group">
            <input type="password" class="form-control login-field tooltip-hide" value="" placeholder="请输入个人邮箱密码或授权码"
                   name="emailPwd"
                   id="binding-emailPwd" ng-model="bindingData.emailPwd" required data-placement="top"
                   data-toggle="tooltip" title="**"/>
            <label class="login-field-icon fui-lock" for="binding-emailPwd"></label>
        </p>

        <p class="form-group">
            <input type="email" class="form-control login-field  tooltip-hide" value="" placeholder="请输入kindle邮箱"
                   id="binding-kindleEmail" name="kindleEmail" ng-model="bindingData.kindleEmail" required
                   data-placement="top" data-toggle="tooltip"
                   title="**">
            <label class="login-field-icon fui-mail" for="binding-kindleEmail"></label>
        </p>
        <button class="btn btn-primary btn-lg btn-block" type="submit" href="#"  ng-disabled="bindingForm.$invalid">绑定!</button>
        <a class="login-link" href="#">Any problem ?</a>

    </form>
    <!-- </p>-->
</p>

</body>
</html>

controller.js如下:

angular.module('binding',['binding.services'])
.controller('formController',function($scope,bindingDataService){
    var params = $scope.bindingData;
    console.log('params: '+params);
    $scope.submitForm = bindingDataService.bindingData('bindingData',params);
});

service.js如下:

angular.module('binding.services',[])
.factory('bindingDataService', function($http){

     console.log('entered the service')
     var bindingData = function(action, params){
         return $http({
                 method: 'POST',
                 url: 'http://89e812c3.ngrok.io/KindlePocket/'+action+'',
                 // pass in data as strings
                 data: $.param(params),
                 headers : { 'Content-Type': 'application/x-www-form-urlencoded' }
             }).success(function(data,status){
                 console.log("success! status:"+status);
                 alert("binding successfully!")
             }).error(function(data,status){
                 alert("binding error!")
                 console.log("error! status:"+status);
             })
     }

     return {
        bindingData: function(action,params){
         console.log('entered the function')
            return bindingData(action,params);
        }
     }

});

每次點擊button總是會要求到跳到這個頁面的url。
請問是什麼原因呢? 之前是把請求相關的程式碼直接放在controller中,沒有問題。是service注入的不對麼? 謝謝大家!

世界只因有你世界只因有你2745 天前618

全部回覆(2)我來回復

  • 習慣沉默

    習慣沉默2017-05-15 17:06:08

    自問自答,修改controller程式碼如下:

    angular.module('binding',['binding.services'])
    .controller('formController',function($scope,bindingDataService){
        $scope.bindingData = {};
        var params = $scope.bindingData;
        console.log('params: '+params);
    
        $scope.submitForm = function(){
            bindingDataService.binding('bindingData',params);
        }
      
    });

    回覆
    0
  • 迷茫

    迷茫2017-05-15 17:06:08

    太長了,ng-submit的用法怎麼用的?

    回覆
    0
  • 取消回覆