AngularJS变量问题[重复]

Question

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调用的数据，就向$rootscope发出一个事件。与事件一起发送从API接收的数据。

然后，您可以将$rootscope事件连同API数据一起从$rootscope广播到应用程序中的其他控制器。

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

您也可以考虑使用一个包含其他控制器的AppController来代替RootScope。

您可以在这里阅读更多关于发射、广播和关于https://stackoverflow.com/a/37717690/903324

稍后，您可能需要此事件用于应用程序中的其他内容。