时间戳

首页 > 解决方案 > 加载子控制器时调用父控制器

angularjs - 加载子控制器时调用父控制器

问题描述

我将父视图定义为：

<div ng-app="myProSupMod" ng-controller="DefaultController" class="container">
    <div class="row">
        <div class="col-md-12">
            <div class="page-header">
                <img src="~/Content/Images/logo.jpg" />
                <b class="projectTitle">Production Support Tool</b>
            </div>
        </div>
        <div ng-show="DefaultProps.UserDivVisible" class="page-header"
             style="font-weight:bold;height:30px;border-bottom:1px solid #d1d1d4;width:100%">
           <div style="float:right;"><span style="margin-right:10px;">
                Welcome 
              <a class="text-success" href="#">
                {{DefaultProps.LoggedInUsername }}
              </a></span>|
              <a href="#" style="margin-left:5px;" class="text-danger"
                 ng-click="LogUserOut()">Logout
              </a>
           </div>
        </div>
    </div>
    <ng-view></ng-view>
</div>

它的控制器：

myProSupMod.controller("DefaultController", ['$scope', '$rootScope', 
'$location', '$route', function ($scope, $rootScope, $location, $route) {

    if (!sessionStorage.getItem("LoggedInUsername")) {
        $scope.DefaultProps = {
            LoggedInUsername: "",
            UserDivVisible: false 
        };
        $location.path('/');
    }
    else {
        $scope.DefaultProps = { 
            LoggedInUsername: sessionStorage.getItem("LoggedInUsername"),
            UserDivVisible: true 
        };
    }
    $scope.LogUserOut = function () {
        sessionStorage.setItem("UserDivVisible", false)
        $location.path('/')
    }
}])

我的一个孩子控制器就像

myProSupMod.controller("LoginController", ['$scope', '$rootScope', 
    '$uibModal', 'LoginService', '$location', function ($scope, $rootScope, 
    $uibModal, LoginService, $location) {

    $scope.DefaultProps.LoggedInUsername = ""
    $scope.DefaultProps.UserDivVisible = false
    $scope.Login = {
        Username: '',
        Password: '',
        Error: '',
        validateLogin: function () {
            $scope.Login.Error = ''
            $scope.DefaultProps.LoggedInUsername = 
                sessionStorage.getItem("LoggedInUsername")
            $scope.DefaultProps.UserDivVisible = 
                sessionStorage.getItem("UserDivVisible")
            $scope.Login.Username = $scope.Login.Password = ''
                $location.path('/Home')  
        }
    }
}])

声明 

$scope.DefaultProps.LoggedInUsername=sessionStorage.getItem("LoggedInUsername")

和

$scope.DefaultProps.UserDivVisible =sessionStorage.getItem("UserDivVisible")

确实在更改“默认”控制器中的属性值，但路由到另一个视图，“默认”控制器属性“LoggedInUsername”和“UserDivVisible”都消失了。看起来我可能需要同时包含上述两个语句我要导航到的所有其他视图。

还有其他方法吗？

“默认”视图是父视图，控制器仅在应用程序启动时被调用一次，在导航到其他视图时，“默认”控制器永远不会被调用。但是，如果我通过单击浏览器上的“重新加载”或在 URL 上点击“输入”来重新加载任何页面，我会看到正在调用“默认”控制器，这也是我在通过 Angular 导航到其他视图时想要发生的事情路由。

标签： angularjsasp.net-mvc-5angular-routing

解决方案

为清楚起见，这是一个简化的模板：

<div ng-app="myProSupMod" ng-controller="DefaultController">
    <div ng-show="DefaultProps.LoggedInUsername">
        Welcome  {{DefaultProps.LoggedInUsername}}
        <button ng-click="LogUserOut()">Logout<button>
    </div>
    <ng-view></ng-view>
</div>

使控制器轻量化：

app.controller("DefaultController", function($scope, LoginService) {
    $scope.DefaultProps = LoginService.getProps();
    $scope.LogUserOut = function () {
        LoginService.logout();
    };
})

使用服务中的函数，它们可以被任何控制器调用，并且它们以一种使代码更易于理解、调试和维护的方式进行封装。

推荐阅读