角度嵌套控制器初始化

我有一個主控制器和一個子控制器的簡單角應用程序。 Maincontroller加載登錄頁面，並在成功登錄時，使用子控制器加載歡迎頁面。該應用程序很簡單，正在工作。我的問題是設置成功登錄後登錄的用戶名。角度嵌套控制器初始化

.controller('mainController', function($rootScope, $location, Auth) { 

    var vm = this; 
    vm.loggedinUser = Auth.getActiveUser(); 
    console.log(">>>>>> ", vm.loggedinUser); 

    //check to see user is logged in for every request made 
    $rootScope.$on('$routeChangeStart', function() { 
     vm.loggedIn = Auth.isLoggedIn(); 

    });

我的HTML頁面很簡單：

<body ng-app="bookapp" ng-controller="mainController as main"> 
.. 
<li class="navbar-text">Hello {{ main.loggedinUser }}! >

的問題是，與loggedInUser值不顯示。

1）爲了工作，我必須初始化routechange偵聽器中的loggedinUser值（將行移動到偵聽器的作品中）。爲什麼這樣？

2）另請注意，console.log語句將在登錄後顯示實際值並顯示歡迎頁面。但是在應用程序加載本身（登錄頁面）期間，在主控制器中設置了變量值，並且只能通過路由更改監聽器來更改它。在歡迎頁面加載期間不會重新初始化。

來源

2016-08-18 Shabin Hashim

您可以將對象引用傳遞給控制器，也可以使用$ watch服務評估每個摘要的getActiveUser函數並更新控制器範圍。

angular.module("bookapp", []); 
 

 
angular.module("bookapp").controller("mainCtrl", function(Auth) { 
 
    var vm = this; 
 
    vm.userData = Auth.data; 
 
    vm.login = function() { 
 
    Auth.data.loginTimeStamp = new Date(); 
 
    Auth.data.user = "TestUser"; 
 
    }; 
 
}); 
 

 
angular.module("bookapp").factory("Auth", function() { 
 
    var data = { 
 
    loginTimeStamp: null, 
 
    user: null, 
 
    }; 
 

 
    return { 
 
    data: data 
 
    }; 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script> 
 

 

 
<body ng-app="bookapp"> 
 

 
    <div ng-controller="mainCtrl as main"> 
 
    <p>Hello {{ main.userData.user }}!</p> 
 
    <button ng-click="main.login()">Log In</button> 
 
    </div> 
 

 

 
</body>

angular.module("bookapp", []); 
 

 
angular.module("bookapp").controller("mainCtrl", function($scope, Auth) { 
 
    var vm = this; 
 
    $scope.getUser = Auth.getActiveUser; 
 

 
    vm.login = function() { 
 
    Auth.setActiveUser("TestUser"); 
 
    debugger; 
 
    }; 
 
    $scope.$watch(function(scope) { 
 
    return scope.getUser(); 
 
    }, function(newValue) { 
 
    vm.loggedinUser = newValue; 
 
    debugger; 
 
    }); 
 
}); 
 

 
angular.module("bookapp").factory("Auth", function() { 
 
    var data = { 
 
    loginTimeStamp: null, 
 
    user: null, 
 
    }; 
 

 
    return { 
 
    getActiveUser: function() { 
 
     return data.user; 
 
    }, 
 
    setActiveUser: function(userName) { 
 
     data.user = userName; 
 
    } 
 
    }; 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script> 
 

 

 
<body ng-app="bookapp"> 
 

 
    <div ng-controller="mainCtrl as main"> 
 
    <p>Hello {{ main.loggedinUser }}!</p> 
 
    <button ng-click="main.login()">Log In</button> 
 
    </div> 
 

 

 
</body>

來源

2016-08-18 16:20:05 10100111001

感謝會試試這個。但是爲什麼在主控制器內不能實現簡單的初始化？ –

當你第一次加載應用程序，你沒有登錄和loggedinUser按值分配。登錄後，loggedinUser屬性從不更新。如前所述，您可以使用對象傳遞引用或在服務函數返回值 – 10100111001

上添加一個表。但爲什麼財產不更新？是否因爲我加載了登錄頁面的mainController，並且所有更多的頁面都是由子控制器加載的？但我可以在主控制器中打印值。那麼這種雙向約束是否會導致變化被反映出來？ html的maincontroller部分沒有被角度再次解析？ –

角度嵌套控制器初始化

回答

相關問題