How can I access different $scope in angularJS
Question
I'm trying to manipulate ng-switch in navigation using HomeCtrl from route template login button. can't figure it out how can i access different $scope cleaner way without using rootscope or parent hack. please help.
<body ng-app="myApp">
<div class="nav" data-ng-controller="HomeCtrl">
<div ng-switch on="loggedin">
<p ng-switch-when="false">please login</p>
<p ng-switch-when="true">Welcome</p>
</div>
</div>
<div class="container" ng-view="">
<!-- partial html -->
<button type="button" ng-click="Login()">Login</button>
<button type="button" ng-click="Logout()">Logout</button>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script>
angular.module('myApp', []);
angular.module('myApp').controller('HomeCtrl', ['$scope', function($scope) {
$scope.loggedin = false;
$scope.Login = function() {
$scope.loggedin = true;
};
$scope.Logout = function() {
$scope.loggedin = false;
};
}]);
</script>
</body>
4 answers
solution1
0 2015-05-30 19:38:15
Try this one
<body ng-app="myApp" data-ng-controller="HomeCtrl">
instead of placing it inside div
solution2
0 2015-05-30 19:57:59
Use nested controller, and than you can access to a parent scope like
$scope.Login = function() {
$scope.$parent.loggedin = true;
};
$scope.Logout = function() {
$scope.$parent.loggedin = false;
};
solution3
0 2015-05-30 20:16:10
This is a good reason to use Controller as and the vm syntax. You can read up on that here: http://www.johnpapa.net/angularjss-controller-as-and-the-vm-variable/
Try this jsfiddle or updated source below.
<body ng-app="myApp">
<div data-ng-controller="HomeCtrl as vm">
<div class="nav">
<div ng-switch on="vm.loggedin">
<p ng-switch-when="false">please login</p>
<p ng-switch-when="true">Welcome</p>
</div>
</div>
<div class="container" ng-view="">
<!-- partial html -->
<button type="button" ng-click="vm.Login()">Login</button>
<button type="button" ng-click="vm.Logout()">Logout</button>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script>
angular.module('myApp', []);
angular.module('myApp').controller('HomeCtrl', [function() {
var vm = this;
vm.loggedin = false;
console.log('hello');
vm.Login = function() {
console.log(vm.loggedin);
vm.loggedin = true;
};
vm.Logout = function() {
console.log(vm.loggedin);
vm.loggedin = false;
};
}]);
</script>
</body>
solution4
0 2015-05-30 20:30:57
A Service to maintain the login status and other session data would be a reasonable solution so avoid scope sharing hacks.
Just inject the service in whichever scope needs to access it, and maintain state within the service.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.