角度嵌套控制器初始化

问题描述：

我有一个主控制器和一个子控制器的简单角应用程序。 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语句将在登录后显示实际值并显示欢迎页面。但是在应用程序加载本身（登录页面）期间，在主控制器中设置了变量值，并且只能通过路由更改监听器来更改它。在欢迎页面加载期间不会重新初始化。

答

您可以将对象引用传递给控制器，也可以使用$ 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>

感谢会试试这个。但是为什么在主控制器内不能实现简单的初始化？ –

当你第一次加载应用程序，你没有登录和loggedinUser按值分配。登录后，loggedinUser属性从不更新。如前所述，您可以使用对象传递引用或在服务函数返回值 – 10100111001

上添加一个表。但为什么财产不更新？是否因为我加载了登录页面的mainController，并且所有更多的页面都是由子控制器加载的？但我可以在主控制器中打印值。那么这种双向约束是否会导致变化被反映出来？ html的maincontroller部分没有被角度再次解析？ –

角度嵌套控制器初始化

相关推荐