Question

我的父视图定义为：

<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上单击“输入”来重新加载任何页面，我会看到正在调用“默认”控制器，这也是我也想通过角度导航到其他视图时发生的情况路由。

Answer 1

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

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

借助服务内部的函数，可以由任何控制器调用它们，并且以使代码易于理解，调试和维护的方式对其进行封装。

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

1 个答案: