角度の入れ子になったコントローラの初期化

私は、メインコントローラと子コントローラで簡単な角度のアプリケーションを持っています。 Maincontrollerがログインページをロードし、成功したログイン時に、Welcomeページが子コントローラを使用してロードされます。アプリは簡単なもので、働いています。私の問題は、成功したログイン後にログインしたユーザー名を設定することです。角度の入れ子になったコントローラの初期化

.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プロパティは更新されません。前述のとおり、オブジェクトを使用して参照を渡すか、サービス関数の戻り値 – 10100111001

Okで監視を追加できます。しかし、なぜプロパティが更新されていないのですか？私はログインページのmainControllerをロードし、それ以降のすべてのページが子コントローラによってロードされるからですか？しかし、私はメインコントローラ内の値を印刷することができます。したがって、双方向バインディングは変更に反映されますか？ htmlのmaincontroller部分は再び角度で解析されませんか？ –

角度の入れ子になったコントローラの初期化

答えて

関連する問題