2015-10-07 84 views
0

当index.html页面呈现时,我的ApplicationController将被调用。当我登录(登录成功)我想刷新我的ApplicationController。怎么做?AngularJS:如何刷新父控制器

我在我的应用程序中定义了下面的控制器。

1)登录

angular.module('aclf').controller('LoginController', LoginController); 
    // The $inject property is an array of service names to inject. 
    LoginController.$inject = [ '$location', 'AuthenticationService', 
      'FlashService' ]; 
    function LoginController($location, AuthenticationService, FlashService) { 
     var loginController = this; 

     loginController.login = login; 

     (function initController() { 
      // reset login status 
      AuthenticationService.ClearCredentials(); 
     })(); 

     function login() { 
      loginController.dataLoading = true; 
      AuthenticationService.Login(loginController.username, 
        loginController.password, function(response) { 
         if (response.username === loginController.username) { 
          console.log(response.authToken); 
          AuthenticationService.SetCurrentUser(
            loginController.username, 
            response.authToken, true); 
          $location.path('/home'); 
         } else { 
          FlashService.Error(response.message); 
          loginController.dataLoading = false; 
         } 
        }); 
     } 
     ; 
    } 

2)ApplicationCotroller

angular.module('aclf').controller('ApplicationController', 
      function($scope,$rootScope) { 
       $scope.currentUser = $rootScope.globals.currentUser; 
       console.log('Inside ApplicationController'); 
      }) 

3)HomeController-当家居控制器渲染我要刷新的部分,因为它包含currentUser。

/** 
    * Home Controller 
    */ 

    angular.module('aclf').controller('HomeController', HomeController); 
    // The $inject property is an array of service names to inject. 
    HomeController.$inject = [ 'UserService', '$rootScope' ]; 
    function HomeController(UserService, $rootScope) { 
     var homeController = this; 

     homeController.user = null; 


     initController(); 

     function initController() { 
      loadCurrentUser(); 

     } 

     function loadCurrentUser() { 
      UserService.GetByUsername($rootScope.globals.currentUser.username) 
        .then(function(user) { 
         homeController.user = user; 
        }); 
     } 
    } 

4)这是我的index.html页面 这里我定义我的身体部位的ApplicationController。这需要至少登录后刷新和注销

<body data-ng-controller="ApplicationController"> 


    <!-- TOPBAR START --> 
    <div id="layout-topbar" data-ng-show="currentUser"> 
     <ul id="top-menu"> 
      <li> 
       <span class="Fs22 FontRobotoLight">Welcome {{currentUser.username}} </span> 
      </li> 
      <li> 
       <a href="#/login" class="btn btn-primary">Logout</a> 
      </li> 
     </ul> 
    </div> 
    <!-- TOPBAR END --> 
    <div id="wrapper"> 
      <div id="wrapperIndent"> 

       <div id="layout-menu-cover" class="Animated05 ps-container"> 
        <div class="ps-scrollbar-x-rail" style="left: 0px; bottom: 3px;"> 
         <div class="ps-scrollbar-x" style="left: 0px; width: 0px;"></div> 
        </div> 
        <div class="ps-scrollbar-y-rail" style="top: 0px; right: 3px;"> 
         <div class="ps-scrollbar-y" style="top: 0px; height: 0px;"></div> 
        </div> 
       </div> 

       <div id="layout-portlets-cover"> 
        <div class="Container96 Fnone MarAuto"> 

         <div class="Container100"> 
          <div class="ContainerIndent"> 
           <div class="EmptyBox10"></div> 
           <div 
             data-ng-class="{ 'alert': flash, 'alert-success': flash.type === 'success', 'alert-danger': flash.type === 'error' }" 
             data-ng-if="flash" data-ng-bind="flash.message"></div> 
           <div data-ng-view></div> 
          </div> 
         </div> 

         <!-- footer --> 
         <div class="Container100"> 
          <div class="ContainerIndent TexAlCenter Fs14"> 
           Angular | All Rights Reserved.</div> 
         </div> 

        </div> 
       </div> 
      </div> 
     </div> 
</body> 

PS:我是很新的AngularJS

+0

但是你已经在你的html页面声明了olny一个控制器。你在哪里声明了其他控制器(HomeController和LoginController)? – hic1086

+0

@ hic1086 - 我已经定义了部分,我没有在问题中包含。 – Unknown

回答

0

我试过重新加载页面的东西。但它不起作用。

我删除应用控制器,并用于

$routeProvider.when('/home', { 
       controller : 'HomeController', 
       templateUrl : 'partials/home.html', 
       controllerAs : 'homeController', 
       leftNav : 'partials/left-nav-main.html', 
       topNav: 'partials/top-nav.html' 
    }) 

.when('/login', { 
      controller : 'LoginController', 
      templateUrl : 'partials/login.html', 
      controllerAs : 'loginController' 
     }) 

在这里,在路线定义templateUrl属性引用在div元素的NG-视图指令加载视图模板。我试图模拟类似于我们的左侧 和顶部导航所做的事情。 topNav属性的值用于使用ng-include指令加载topnav div元素(“id = top-nav”)中的顶部导航视图。我们也对左侧导航也一样。如果当前路由配置未定义leftNav属性,则左导航部分中的ng-if指令用于隐藏左导航。

该集成的最后一部分是设置currentRoute属性并将其绑定到ng-include。 Angular使用路径配置templateUrl属性设置了ng-view模板,但它不知道或关心我们添加的topNav和leftNav属性。我们需要编写一些自定义代码,将导航网址与各自的ng-includes指令绑定。

$scope.$on('$routeChangeSuccess', function (e, current, previous) { 
$scope.currentRoute = current; 
}); 

这里是我的index.html

<div class="navbar navbar-default navbar-fixed-top top-navbar"> 
<!--Existing html--> 
<div id="top-nav-container" class="second-top-nav"> 
<div id="top-nav" ng-include="currentRoute.topNav"></div> 
</div> 
</div> 
<div class="container-fluid"> 
<div id="content-container" class="row"> 
<div class="col-sm-2 left-nav-bar" 
ng-if="currentRoute.leftNav"> 
<div id="left-nav" ng-include="currentRoute.leftNav"></div> 
</div> 
<div class="col-sm-10 col-sm-offset-2"> 
<div id="page-content" ng-view></div> 
</div> 
</div> 
</div> 

现在左侧导航和顶级导航仅出现在主页上并没有出现在登录页面。

-1

嗯,我认为最好的做法是重新加载整个页面:

如果您使用angular-ui/ui-router

$state.reload();

如果使用其他路由器

$route.reload();

+0

把这个函数放在哪里($ route.reload();)?我已经在run方法中加入了这个。看起来不工作。 – Unknown

+0

这是我的根对象:$$路线:对象 控制器: “HomeController的” controllerAs: “HomeController的” 键:数组[0] originalPath: “/家” 正则表达式:/^\ /家庭$/ 全球:假 IGNORECASE:假 lastIndex的:0 多:假 来源: “^ \ /家庭$” __proto__:/(?)/ reloadOnSearch:真 templateUrl: “谐音/ home.html做为” – Unknown