Question

我正在使用我的第一个AngularJS应用，我在后端使用Python / Flask / Rest API。我的app.js文件中有一个脚本，用于执行登录的表单处理。该脚本按预期工作，但一旦该人登录我想做两件事，将JWT存储在localStorage中，我已经完成了。

在同一个函数中我现在有一个有效的JWT，我想运行另一个请求给我登录的人的信息。我能够运行请求并获得有效数据，但我在存储时遇到问题这个数据在一个变量中通过HTML页面使用。我已经使用$ rootScope来存储它并访问它但我觉得这可能不是正确的方法而且我希望确保我能正确地做事。

这是我的app.js代码;

var app = angular.module('app', []);


app.controller('FormLoginCtrl', function ($scope, $http, $window, $rootScope) {

$scope.form = {
    email: "",
    password: "",
};
$scope.submitForm = function() {

    $http({

        url: "http://127.0.0.1:5000/auth/login_user",
        data: JSON.stringify($scope.form),
        method: 'POST',

    }).success(function(data){

        console.log("OK", data)
        localStorage.token = data.token
        sessionStorage.token = data.token

        $http({

            url: "http://127.0.0.1:5000/auth/login_user",
            method: 'GET',
            headers: {'X-API-KEY' : data.token}
        }).then(function success(response){
            console.log(response);
            $rootScope.user = response.data;
        })

    }).error(function(err){"ERR", console.log(err)})
};

});

我的HTML表单代码;

<form name="login" ng-controller="FormLoginCtrl" ng-submit="submitForm()" id="login" class="contact-form-wrapper">

<div class="row">

    <div class="col-sm-12">

        <div class="form-group">
            <input id="inputEmail" ng-model="form.email" type="test" class="form-control" placeholder="Your Email">
            <div class="help-block with-errors"></div>
        </div>

    </div>

    <div class="col-sm-12">

            <div class="form-group">
                <input id="password" ng-model="form.password" type="text" class="form-control" placeholder="Your Password">
                <div class="help-block with-errors"></div>
            </div>

    </div>

    <div class="col-sm-12">
        <button type="submit" ng-click="Submit" class="btn btn-primary btn-sm mt-5">Login</button>
    </div>

在我的main-menu.html文件中，我试图调用该变量;

<ul class="nav navbar-nav" id="responsive-menu">
    <li><a href="index.html">Write A Review</a></li>
    <li ng-hide="user"><a href="signin.html">Sign In</a></li>
    <li ng-hide="user"><a href="register.html">Register</a></li>
    <li>
    <a ng-show="user" href="category-01.html">Welcome {{ user['first_name'] }}</a>
    <ul ng-show="user">
        <li ng-show="user"><a href="agent-grid.html">My Profile</a></li>
        <li ng-show="user"><a href="agent-list.html">My Reviews</a></li>
    </ul>
    </li>
</ul>

我应该添加它目前正在工作，但我知道这可能不是正确的方法。我感谢任何帮助。

Answer 1

您需要将main-menu.html代码单独包装在AngularJS控制器中。

从第二次API调用获得数据后，emit将范围向上的事件发送到$rootScope。与事件一起发送您从API收到的数据。

然后，您可以broadcast将事件从$rootScope下载到您应用中的其他控制器以及API数据。

所以它会 -

LoginController ---- emit ---> RootScope ---- broadcast ----> Other Controllers

您可能还会考虑使用包含其他控制器的AppController，而不是推送到RootScope。

您可以阅读有关发射，广播和此处的更多信息 - https://stackoverflow.com/a/37717690/903324

稍后您可能需要此活动来处理您应用中的其他内容。

编辑：与其他人一样，您也可以将数据保存在服务中，而不是将其与事件一起发送。然后，您可以调用服务方法来访问各种控制器中的数据，但您仍然需要一个事件来告诉应用程序中用户已登录的其他控制器。

AngularJS变量问题

1 个答案: