2016-07-01 2 views
1

Ich versuche AngularJS dazu zu bringen, ein Login-Formular zu verbergen, und es durch die vom Server gesendeten Daten zu ersetzen (im Moment ein lokaler JSON).Die Eigenschaft "appState" unter der Nummer "200" kann nicht mit AngularJS erstellt werden

Dies ist mein Controller:

app.controller("testController", ['$scope', '$http', function ($scope, $http) { 
    var eventList = this, 
     dataReceived; 

    eventList.events = []; 


    $scope.submitLogin = function ($scope, http) { 

     var response = $http.get("../json/Login.json"); 
     response.success(function (data, $scope) { 
      $scope.appState = {}; 
      $scope.appState.bool = false; 
      if (data.success) { 
       eventList.events = data.eventHead; 
       $scope.appState.bool = true; 

      } else { 
       window.alert(data.ErroMsg); 
      } 
     }); 
     response.error(function (data) { 
      window.alert("Error"); 
     }); 
    }; 
}]); 

und das ist mein HTML:

<div class="login-page" ng-hide="appState.bool"> 
     <div class="form"> 
      <img src="images/magnum.jpg" class="spacerSpe"> 
      <form class="login-form"> 
       <input type="text" placeholder="Matricule" /> 
       <input type="password" placeholder="Annee de Naissance" /> 
       <button ng-click="submitLogin()" >Log In</button> 
      </form> 
     </div> 
</div> 

<div ng-show="appState.bool" align="center">...</div> 

die Login-Seite sollte also verstecken, wenn die Submit-Button (im Moment dort gedrückt wird ist keine tatsächliche Auth, es funktioniert nur, wenn Sie die Taste drücken), aber aus irgendeinem Grund bekomme ich diese Fehlermeldung und Winkel erkennt nicht, dass meine $scope.appState.bool hat sich geändert.

Die genaue Nachricht ist

ErrorNotification.js:125 ConsoleAgent: TypeError: Cannot create property 'appState' on number '200'

Antwort

0

Dank fehlen sshow und Rob Louie für Ich zeige meine schreckliche $ htttp.get-Syntax und merke, dass meine Bereichsdefinition falsch platziert wurde. krank verlassen Sie den abschließenden Controller-Code hier, wenn es jemandem hilft

1

Bitte lesen Sie die Dokumentation für $ http: https://docs.angularjs.org/api/ng/service/ $ http

Ihre Syntax ist falsch und sollte aktualisiert werden, aber ich denke, das Hauptproblem ist, dass Sie erstellen eine neue lokale Variable mit dem Namen $ scope innerhalb Ihres "success" Callbacks und setzen Sie dort Ihre Variablen. Sie müssen sie für die reguläre $ scope-Variable festlegen.

+0

Zuerst danke für Ihre Antwort. Ich korrigierte meinen Code entsprechend dem Dokument, aber wenn ich $ scope.appState auf der regulären Bereichsvariablen deklariere, erhalte ich einen anderen Fehler angular.min.js: 117 TypeError: Kann die Eigenschaft 'appState' von undefined nicht setzen –

+0

Kannst du deine aktualisierte Post Code oder machen Sie ein JFiddle oder etwas, das zeigt, wie es jetzt aussieht? –

+0

es funktioniert jetzt habe ich den aktualisierten Controller in den Antworten geschrieben Danke für Ihre Hilfe –

0

In Ihrem HTML-Code rufen Sie submitLogin ohne Parameter auf.

<button ng-click="submitLogin()" >Log In</button> 

Ihre Funktionsdefinition für submitLogin() erwartet jedoch zwei Parameter.

$scope.submitLogin = function ($scope, http) { [...] 

beide sind bereits im Rahmen der Linie 1. definiert

app.controller("testController", ['$scope', '$http', function ($scope, $http) { 

.success() und .error() auf Versprechungen Verwendung ist für den Standard .then(success, error) Muster veraltet. So gibt $http.get() ein Versprechen mit response als Daten zurück.

Wahrscheinlicher ist, sollten Sie so etwas wie dies tun:

app.controller('testController', ['$scope', '$http', function ($scope, $http) { 
    $scope.submitLogin = function() { 
    var promise = $http.get('../json/Login.json'); 
    promise.then(function (response) { 
     window.alert('Response is 200'); 
    }, function (error) { 
     window.alert('Error' + error); 
    }); 
    }; 
}]); 
0

Ich denke, es ist ein Syntaxfehler, sind Sie $ im http im $scope.submitLogin = function ($scope, http) { ... }

Verwandte Themen