$ scope值不会在其他控制器中更新

Question

我在更新视图上的值时遇到问题.让我向您展示我的代码,并对正在发生的事情进行一些解释.我知道代码是乱七八糟的,因为我现在尝试了很多代码组合.

我有这个accCtrl控制器

controllers.accCtrl = function($scope, sessionFactory){
    sessionFactory.isLoggedIn().then(function(data){
        console.log(data.logged_in);
        $scope.loggedIn = data.logged_in;
    });
    $scope.logOut = function(){
        sessionFactory.logOutUser().then(function(data){
            $scope.loggedIn = data.logged_in;
        });
    }
}

控制台注销输出是false和这个变量$ scope.loggedIn控制我的HTML通过显示或隐藏登录,注册,我的配置文件和注销按钮

<div ng-controller="accCtrl">
    {{loggedIn}}
        <ul>
        <li ng-hide="loggedIn">
            <a href="#/login">
                <b>Login</b>
            </a>
        </li>
        <li ng-hide="loggedIn">
            <a href="#/register" >
                <b>Register</b>
            </a>
        </li>
        <li ng-show="loggedIn" >
            <a href="#/my_profile">
                <b >My profile</b>
            </a>
        </li>
        <li ng-show="loggedIn"> 
            <a ng-click="logOut()">
                <b>Log out</b>
            </a>
        </li>
    </ul>
</div>

现在用户尝试登录,因此他点击登录按钮,显示登录表单.此登录功能以loginCtrl编写

    controllers.loginCtrl = function($scope, $http, $location, $timeout, sessionFactory){
    $scope.loginUser = function () {
        $http({
            method: 'POST',
            url: $location.protocol() + '://' + $location.host() + '/server/api/users/login',
            headers: {'Content-Type': 'application/x-www-form-urlencoded'},
            data : $.param({
                username : $scope.username,
                password : $scope.password
            })
        }).success(function(data){
                sessionFactory.isLoggedIn().then(function(data){
                    $scope.loggedIn = data.logged_in;
                });
                window.location.href="/#/home";
        });
    };
}

成功登录后,他或她被重定向到主页,但问题是$scope.loggedIn帐户控制器中的变量甚至没有更新,即使console.log(data.logged_in)在loginCtrl中设置为true

如果用户按下了注销按钮,一切正常,因为我在accCtrl中调用函数.所以唯一的问题是当用户登录时,因为他在另一个控制器中执行此操作.

这里也是我的sessionFactory,万一你不知道我如何检查用户是否被记录

app.factory('sessionFactory', ['$http', '$location', function($http, $location){
    var factory = {};

    factory.logOutUser = function(){
        return $http({
            method: 'GET',
            url: $location.protocol() + '://' + $location.host() + '/server/api/users/logout'
        }).then(function successCallback(response){
            return response.data;
        },function errorCallback(response) {
            console.log('error logging out: ' + response);
        });
    }
    factory.isLoggedIn = function(){
        return $http({
            method: 'GET',
            url: $location.protocol() + '://' + $location.host() + '/server/api/users/isLoggedIn'
        }).then(function successCallback(response){
            console.log(response.data);
            return response.data;
        },function errorCallback(response) {
            console.log('Checking login failed: ' + response);
        });
    }

    return factory;
}]);

我的app.js.

var app = angular.module('app', ['ngRoute', 'ngAnimate', 'ui.sortable', 'ngFileUpload'])
app.config(function($routeProvider){
    $routeProvider.
    when('/', {controller:'homeCtrl', templateUrl:'app/templates/home.html'}).
    when('/home', {controller:'homeCtrl', templateUrl:'app/templates/home.html'}).
    when('/contact', {controller:'contactCtrl', templateUrl:'app/templates/contact.html'}).
    when('/about_us', {controller:'aboutUsCtrl', templateUrl:'app/templates/aboutUs.html'}).
    when('/cookies', {controller:'cookiesCtrl', templateUrl:'app/templates/cookies.html'}).
    when('/faqs', {controller:'faqsCtrl', templateUrl:'app/templates/faqs.html'}).
    when('/register', {controller:'registerCtrl', templateUrl:'app/templates/register.html'}).
    when('/login', {controller:'loginCtrl', templateUrl:'app/templates/login.html'}).
    when('/my_profile', {controller:'myProfileCtrl', templateUrl:'app/templates/myProfile.html'}).
    when('/trade/:param1', {controller:'tradeCtrl', templateUrl:'app/templates/trade.html'}).
    when('/user/:param1', {controller:'userCtrl', templateUrl:'app/templates/user.html'}).
    when('/swap/:param1', {controller:'subCategoriesCtrl', templateUrl:'app/templates/subCategories.html'}).
    when('/swap/:param1/:param2', {controller:'products', templateUrl:'app/templates/products.html'}).
    when('/swap/:param1/:param2/:param3', {controller:'product', templateUrl:'app/templates/product.html'}).
    otherwise({ redirectTo: '/home'});
  });

我可能要实现一些手表或一些类似的功能,但我真的不知道如果你帮我的话我会很感激.

在图片中解释

显示登录和注册按钮

用户单击登录按钮并成功登录,但按钮未刷新,因为在loginCtrl中发生了操作,但按钮位于accCtrl中

在浏览器中点击f5后,按钮会在accCtrl中正确更新.

TLTR

一旦用户登录loginCtrli ,我必须更新$scope.loggedIn值accCtrl

如果您需要任何其他信息,请告诉我们

Answer 1

出现问题是因为angularjs中的控制器只初始化一次,除非您将其设置为重新初始化.尝试提醒某些内容,accCtrl即使您多次导航到该页面,它也只会发出一次警报.击中ctrl+f5工作是因为它重新初始化了你的控制器.您只需使用$window.location.reload()重新初始化控制器即可.什么$window.location.reload()做的是它不仅重新加载你的控制器,但你的服务,以及.既然,您正在使用ngRoute,我可以认为重新初始化您的控制器正在使用$window.location.reload();

.success(function(data){
                sessionFactory.isLoggedIn().then(function(data){
                    $scope.loggedIn = data.logged_in;
                });
                window.location.reload(); //the only workaround i could find with ngroute as for now.
                window.location.href="/#/home";
        });

但是,使用ui.Routerie,$stateProvider您可以选择仅重新初始化控制器,如下所示.

.state('home', {
    url: '/home',
    templateUrl: 'templates/home.html',
    controller: 'accCtrl',
    reload: true //will reload controller when state is being access
});

$state.transitionTo($state.current, {}, { reload: true, inherit: true, notify: true });

和

$state.go('.', null, { reload: true });

将解决重新初始化控制器的问题,这似乎是你现在的问题.