Question

我有一个角度应用程序，我希望在用户登录后加载整个页面模板

这是我的登录代码

        $scope.login = function (event) {
        event.preventDefault();
        Auth.login({
            username: $scope.username,
            password: $scope.password,
            rememberMe: $scope.rememberMe
        }).then(function () {
            $scope.authenticationError = false;
            if ($rootScope.previousStateName === 'register') {
                $state.go('home');
            } else {
                 $location.path("dashboard");
                }
        }).catch(function () {
            $scope.authenticationError = true;

        });
    };

当我导航到仪表板时 - 我曾希望我的所有控制器都会再次加载，但他们不会具体来说，我想重新加载我的标题控制器，以便用户名称和图像出现在屏幕上 - 只有当我按下F5时才会重新加载

当用户成功登录时，是否强制重新加载控制器？

干杯达明

使用javascript导入的index.html代码

<!doctype html>
<!--[if lt IE 8]>         <html class="no-js lt-ie8"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
    <head>
        <meta charset="utf-8">
        <meta http-equiv='X-UA-Compatible' content='IE=edge'>
        <title>Page</title>
        <meta name="description" content="Responsive Admin Web App">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">

        <link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,400,600,300,700' rel='stylesheet' type='text/css'>
        <!-- Needs images, font... therefore can not be part of main.css -->
        <link rel="stylesheet" href="fonts/themify-icons/themify-icons.min.css">
        <link rel="stylesheet" href="jsLibs/font-awesome/css/font-awesome.min.css">
        <link rel="stylesheet" href="jsLibs/weather-icons/css/weather-icons.min.css">
        <!-- end Needs images -->


            <!-- build:css({.tmp,client}) styles/main.css -->
            <link rel="stylesheet" href="styles/bootstrap.css">
            <link rel="stylesheet" href="styles/ui.css">
            <link rel="stylesheet" href="styles/main.css">
            <!-- endbuild -->

    </head>
    <body data-ng-app="app"
          id="app"
          class="app"
          data-custom-page 
          data-off-canvas-nav
          data-ng-controller="AppCtrl"
          data-ng-class=" {'layout-boxed': admin.layout === 'boxed'} "
          >
        <!--[if lt IE 9]>
            <div class="lt-ie9-bg">
                <p class="browsehappy">You are using an <strong>outdated</strong> browser.</p>
                <p>Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
            </div>
        <![endif]-->

        <section data-ng-include=" 'views/header.html' "
                 id="header"
                 class="header-container "
                 data-ng-class="{ 'header-fixed': admin.fixedHeader,
                                  'bg-white': ['11','12','13','14','15','16','21'].indexOf(admin.skin) >= 0,
                                  'bg-dark': admin.skin === '31',
                                  'bg-primary': ['22','32'].indexOf(admin.skin) >= 0,
                                  'bg-success': ['23','33'].indexOf(admin.skin) >= 0,
                                  'bg-info-alt': ['24','34'].indexOf(admin.skin) >= 0,
                                  'bg-warning': ['25','35'].indexOf(admin.skin) >= 0,
                                  'bg-danger': ['26','36'].indexOf(admin.skin) >= 0
                 }"></section>

        <div class="main-container">
            <aside data-ng-include=" 'views/sidebar.html' "
                   id="nav-container"
                   class="nav-container"
                   data-ng-class="{ 'nav-fixed': admin.fixedSidebar,
                                    'nav-horizontal': admin.menu === 'horizontal',
                                    'nav-vertical': admin.menu === 'vertical',
                                    'bg-white': ['31','32','33','34','35','36'].indexOf(admin.skin) >= 0,
                                    'bg-dark': ['31','32','33','34','35','36'].indexOf(admin.skin) < 0
                   }">
            </aside>

            <div id="content" class="content-container">
                <section data-ng-view
                         class="view-container {{admin.pageTransition.class}}"></section>
            </div>
        </div>




        <!-- endbuild -->
    </body>
</html>

    enter code here

Answer 1

您可以使用reload: true执行此操作。这将再次执行您的控制器逻辑。

reload v0.2.5布尔值（默认为false），如果为true则强制转换即使状态或参数没有改变，也就是重新加载州。它与reloadOnSearch不同，因为你在使用它时会使用它想要在一切都相同时强制重新加载，包括搜索 PARAMS。

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

查看quick ref docs了解更多信息

Answer 2

虽然我同意Drazisil，但您可以使用angular-ui/ui-router $state.reload()。在控制器中注入$ scope，然后创建一个重新加载的方法。

$scope.reload = function() {
    $state.reload();
};

Answer 3

谢谢你们所有的建议 - 一些非常好的观点

我很适合通过使用$ scope。$ watch来成功登录时设置的变量

Angular JS - 重新加载整个页面

3 个答案: