2014-12-09 2 views
0

각도 js에 익숙하지 않습니다. 각도 js $ http를 사용하는 ajax 호출로 구성된 작은 프로그램을 만들려고했습니다. 실수를 저질렀습니다. 누군가 도와 주면 행복할까요? 다음은 코드를입니다각도 js를 사용하는 ajax 호출에서 오류가 발생했습니다.

login.html

<head></head> 

    <body> 
     <form ng-app="" ng-controller="validateCtrl" name="myForm" novalidate> 
      <div ng-hide="var"> 
       <h2><center>SIGN-IN</center></h2> 

       <p>Username: 
        <br> 
        <input type="text" name="user" ng-model="user" required><span style="color:red" ng-show="myForm.user.$error.required" />Username is required</p> 
       <p>Password: 
        <br> 
        <input type="password" name="password" ng-model="password" required /> <span style="color:red" ng-show="myForm.password.$error.required">Password is required.</span> 

        <p> 
         <input type="submit" ng-click="validate()" ng-disabled=" myForm.user.$invalid || 
myForm.password.$invalid" /> 
        </p> 
      </div> 
      <div ng-hide="welcomeVar"> <span> {{ listOfCustomers }} </span> 
       <h2><center>Welcome! {{ user }}</center></h2> 

       <button class="list" ng-click="customerList()">List of Customers</button> 
       <ul> 
        <li ng-repeat="x in listOfCustomers">{{ x.CustomerID + ', ' + x.CompanyName }}</li> 
       </ul> 
       <br> 
       <button class="signout" ng-click="validate()">Log Out</button> 
      </div> 
     </form> 

JS 부분 :

<script> 
      function validateCtrl($scope, $http) { 
       $scope.user = 'ABC XYZ'; 
       $scope.password = 'abcbc'; 
       $scope.welcomeVar = true; 

       $scope. 
       var = false; 
       $scope.validate = function() { 
        $scope. 
        var = !$scope. 
        var; 
        $scope.welcomeVar = !$scope.welcomeVar 
       }; 
       $scope.listOfCustomers = null; 

       $scope.customerList = function() { 
        $http.get("http://www.iNorthwind.com/Service1.svc/getAllCustomers") 
         .success(function(data) { 
         $scope.listOfCustomers = data; 
        }) 
         .error(function(data) { 
         $scope.user = 'Xyz'; 
        }); 
       }; 
      } 
     </script> 
+0

정확히 무엇이 작동하지 않습니까? – Rasalom

+0

"List Of Customers"버튼을 클릭하면 해당 URL 링크를 호출하는 버튼이 아약스에 의해 호출되지 않고 컨트롤이 함수의 오류 부분으로 이동합니다. – user1871812

+0

오케이, 나는 틀린 것이있다. – Rasalom

답변

0

귀하의 코드가 어떤 구문 오류를 제외하고 괜찮지 만, 당신이 전에 somrthing을 제거하기 위해 노력하기 때문에 나는 그것이 희망) 여기에 코드 게시 :

요청에 대한 응답은 {GetAllCustomersResult : [// 여기 요소 배열]}이므로 succes 당신이해야 할 것입니다 응답 핸들러 : $scope.listOfCustomers = data.GetAllCustomersResult;

그러나이 사소한 일을의 주요 문제는 여기에 설명 :

AngularJS performs an OPTIONS HTTP request for a cross-origin resource

이를 디버깅하려면, 당신은 모든 브라우저에서 개발자 도구를 엽니 다했다 ('F12'은 엽니 다 공통 키입니다) 콘솔 및 네트워크 요청을 살펴보십시오.

+0

도와 주셔서 감사합니다. Mozilla, Chrome과 같은 다른 브라우저에서 제대로 작동했지만 IE 버전이 10 미만인 문제가있었습니다. 인터넷 옵션의 보안 탭에서 "다른 도메인에 대한 액세스"속성을 Enabled로 설정 한 다음 Internet Explorer <10 – user1871812

관련 문제