AngularJS對Web API調用（不工作）

我想打電話給使用工廠方法使用funtion從AngularJS UI API一個。AngularJS對Web API調用（不工作）

我已經把一個的onclick funtion（登錄（）），其上調用javascript.js功能的登錄頁面上的提交按鈕。 onclick函數不調用javascript.js函數。我也調試過測試函數調用，但它不工作。

如何正確地調用來自控制器工廠？

我說明下文

登錄頁面

<html> 
<head> 
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" /> 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script> 
<script src="../services/javascript.js"></script> 
<style> 
    body { 
     background: #444343; 
     background: -moz-radial-gradient(center, ellipse cover, #444343 0%, #353434 100%); 
     background: -webkit-radial-gradient(center, ellipse cover, #444343 0%, #353434 100%); 
     background: radial-gradient(ellipse at center, #444343 0%, #353434 100%); 
     filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#444343', endColorstr='#353434', GradientType=1); 
    } 
</style> 
</head> 

<body > 
<div id="login" data-ng-app="APP"> 
    <form role="form"> 
     <div class="row"> 
      <div class="col-md-4 col-md-offset-4"> 
       <div class=""> 
        <div class="" style="text-center"> 

         <img src="../../content/img/logo.png" class="img-responsive" style="max-width: 50%;margin: 0 auto;"/> 
        </div> 
        <br /> 
        <div class="inner-addon left-addon" style="color:white;"> 
         <i class="fa fa-user"></i> 
         <input type="text" class="form-control input-lg" style="border-radius:4px; background-color:#585858; border: none; color:white;" placeholder="Usuario" data-ng-model="loginData.userName" required autofocus> 
        </div> 

        <br /> 
        <div class="inner-addon left-addon" style="color:white;"> 
         <i class="fa fa-key"></i> 
         <input type="password" class="form-control input-lg" style="border-radius:4px;background-color:#585858; border: none;color:white; " placeholder="Contraseña" data-ng-model="loginData.password" required> 
        </div> 
        <!-- <br /> --> 
        <!-- <div class="checkbox"> 
         <label> 
          <input type="checkbox" ng-model="loginData.useRefreshTokens"> Mantener la sesión activa 
         </label> 
        </div> --> 
        <br /> 
        <button class="btn btn-tmt btn-lg btn-block" type="submit" data-ng-submit="login()"> Empezar </span></button> 
        <a href="Default.html" class="button">Next</a> 
        <div data-ng-hide="message == ''"> 
         <br /> 
         <div class="alert alert-danger"> 
          {{message}} 
         </div> 
        </div> 
       </div> 
      </div> 
     </div> 
    </form> 
</div>

Javascript.js功能

代碼

'use strict'; 
angular.module('APP',[]). 
factory('authService', ['$http', '$q', 'localStorageService', 
'ngAuthSettings','$rootScope', 
function ($http, $q, localStorageService, ngAuthSettings, $rootScope) {

變種_login =函數（loginData）{ VAR數據= 「grant_type =密碼&用戶名=」 + loginData.userName + 「&密碼=」 + loginData.password; 如果（loginData.useRefreshTokens）{ 數據=數據+ 「& CLIENT_ID =」 + ngAuthSettings.clientId; }

var deferred = $q.defer(); 

    $http.post('localhost:54495' + 'token', data, { headers: { 'Content-Type': 'application/x-www-form-urlencoded' } }).success(function (response) { 

     if (loginData.useRefreshTokens) { 
      localStorageService.set('authorizationData', { token: response.access_token, userName: response.userName, nombreUsuario: response.nombreUsuario, refreshToken: response.refresh_token, useRefreshTokens: true }); 
     } 
     else { 
      localStorageService.set('authorizationData', { token: response.access_token, userName: response.userName, nombreUsuario: response.nombreUsuario, refreshToken: "", useRefreshTokens: false }); 
     } 
     _authentication.isAuth = true; 
     _authentication.userName = response.userName; //loginData.userName; 
     _authentication.nombreUsuario = response.nombreUsuario; 
     _authentication.tipoPerfil = response.tipoPerfil; 
     _authentication.useRefreshTokens = loginData.useRefreshTokens; 
     $rootScope.userName = response.userName; 
     $rootScope.nombreUsuario = response.nombreUsuario; 
     //$rootScope.tipoPerfil = response.tipoPerfil; 

     deferred.resolve(response); 

     _loginInfo(); 

    }).error(function (err, status) { 
     console.log("err", err); 
     _logOut(); 
     deferred.reject(err); 
    }); 

    return deferred.promise; 

}; 


}]);

來源

2017-06-09 krazyhamad

此代碼是不完整的。你的控制器在哪裏，你面臨的錯誤是什麼？ – 31piy

您應該定義您的控制器並將您的工廠注入控制器。然後做一次http呼叫。它將如預期般揮之不去。 –

我已經更新myFactory如何從控制器調用登錄功能。 – krazyhamad

//So let's say you have define the myFactory 

//defining factory 
app.factory('myFactory', function() { 
    var serviceObj = {}; 
    serviceObj.name = ''; 
    serviceObj.setName = function (newName) { 
     serviceObj.name = newName; 
}; 
    return serviceObj; 
}); 


//then to use it 

    app.controller('myController', function ($scope, myFactory) { 

     myFactory.setName("Saksham Chauhan"); 
     $scope.factoryName = myFactory.name;  

    });

來源

2017-06-09 05:08:30

我已經更新myFactory我怎麼稱呼從控制器 – krazyhamad

我通過我廠創建於像$範圍控制器登錄功能檢查上面的代碼 –

AngularJS對Web API調用（不工作）

回答

相關問題