Question

我试图让AngularJS在收到回复后隐藏登录表单，并将其替换为服务器发送的数据（目前为本地JSON）。

这是我的控制者：

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");
        });
    };
}]);

这是我的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>

因此，一旦按下提交按钮，登录页面应该隐藏（暂时没有实际的身份验证，如果按下按钮，它就会起作用）但由于某种原因我收到此错误消息并且角度没有承认我的 $scope.appState.bool已发生变化。

确切的信息是

ErrorNotification.js：125 ConsoleAgent：TypeError：无法创建属性＆＃39; appState＆＃39;数字＆＃39; 200＆＃39;

Answer 1

请阅读$ http：https://docs.angularjs.org/api/ng/service/ $ http

的文档

您的语法错误并且应该更新，但我认为主要的问题是您正在创建一个名为$ scope的新局部变量，其中包括＆＃34; success＆＃34;回调并在那里设置你的变量。您需要在常规$ scope变量上设置它们。

Answer 2

在您的HTML中，您呼叫submitLogin时没有任何参数。

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

但是，submitLogin()的函数定义需要两个参数。

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

这两个都已在第1行的范围中定义。

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

在promises上使用.success()和.error()已弃用，以支持标准.then(success, error)模式。因此，$http.get()会以response作为数据返回承诺。

你更有可能做这样的事情：

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);
    });
  };
}]);

Answer 3

我认为这是一个语法错误，您在$

中的http中遗漏了$scope.submitLogin = function ($scope, http) { ... }

Answer 4

感谢sshow和Rob Louie指出我糟糕的$ htttp.get语法，并注意到我的范围定义错位;如果有帮助的话，请留下最终的控制器代码

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

    var eventList = this;
    eventList.events = [];

  $scope.submitLogin = function () {
    $scope.appState = {};
    $scope.appState.bool = false ;

    var promise = $http.get('../json/Login.json');
    promise.then(function (response) {
        $scope.appState.bool = true;

    }, function (error) {
      window.alert('Error' + error);
    });
  };
}]);

无法创建属性＆＃34; appState＆＃34;数字＆＃34; 200＆＃34;使用AngularJS

4 个答案: