Geek Answers Handbook

Update variable in another controller in AngularJS

Ok, so I am building a web application using angular.js. I started implementing user authentication.

I did this with my own controller:

app.controller("userControl", ["$http", "share", function($http, share){ this.login = {}; var user = this; this.doLogin = function(){ this.login.fn = "login"; $http.post('classes/main.php', user.login).success(function(data){ console.log(data.Error); if(data.Error == undefined){ alert("Success"); share.user = data; window.location.href = "#memberHome"; } }); } }]);

and I have a member page with my own controller:

HTML:

 <div id="memberHome" data-role="page" ng-controller="member-Ctrl as member"> <nav class="navbar navbar-inverse"> <div class="container-fluid"> <div class="navbar-header"> <p class="navbar-brand" href="#">Calendar</p> </div> <ul class="nav navbar-nav navbar-left"> <li><a href="#">Overview</a></li> <li><a href="#">Friends</a></li> </ul> <ul class="nav navbar-nav navbar-right"> <li><a href="#"><span class="glyphicon glyphicon-user"></span> Logged in as: {{member.user.forename + " " + member.user.surname}}</a></li> <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Log Out</a></li> </ul> </div> </nav> <div data-role="content"> <calendar selected="day"></calendar> </div> </div>

JavaScript:

 app.controller("member-Ctrl", ["share", function(share){ this.user=share.user; }]);

I need a user controller to tell the element controller about the new user.

I searched for this and looked at the answers of a similar question that led me to This

and I created the service as shown in the video:

 app.service("share", function(){ this.user = {} });

Now when I log in and redirect to the memberHome page, it tells me Logged in as:

Can anyone understand why this could be?

I am very new to Angular, and learn almost everything when I need it.

I have to say that I am using jQuery Mobile (for a multi-page document) and Bootstrap 3

+5
source share
1 answer

You can use the service to exchange information between controllers or use $ rootScope

 var app = angular.module('mymodule',[]); app.controller('Controller1', ['$scope','$rootScope', function($scope, $rootScope) { $rootScope.showImages = true; }]); app.controller('Controller2', ['$scope','$rootScope', function($scope, $rootScope) { $rootScope.showImages = false; }]);

And in the template:

 <div ng-controller="Controller1"> <div class="images" ng-show="$root.showImages"></div> </div>
+8
source

More articles:


All Articles