javascript - Angular Controller not saving Object data -
code working fine till decided move login , registration form onto own partial, after login, redirect partials/dashboard.html user object data not accessible anymore. have console.logged in script.js check, object consoled cant access on dashboard.html
index.html
<!doctype html> <html ng-app='fullmean_app'> <!-- name & load ng app --> <head> <title>discussion board</title> <!-- require angular --> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular.min.js"/></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular-route.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/ngstorage/0.3.10/ngstorage.min.js"></script> <script src="/js/user_script.js"></script> <script src="/js/topic_script.js"></script> </head> <body> <!-- !! load controller ** check name ** !! --> <div ng-view=""> </div> </body> </html> dashboard.html
<div ng-controller="logincontroller"> <a href="#/dashboard">dashboard</a> | <a href="#/topics">topics</a> | <a href="#/users">users</a> <h4>welcome {{users.name}}</h4> {{$storage.user.name}} {{user.name}} {{$storage.user.name}} <div ng-repeat="user in users"><h4>{user.name}}</h4></div> <!-- have tried multiple combinations access data ,, none working --> <form> <input type='submit' value='logout' ng-click='logout()'> </form> </div> <div ng-controller="topiccontroller"> <form> <label>add new topic</label><br> <label>topic</label><br> <input type='text' name="topic" ng-model='new_topic.topic'><br> <label>description</label><br> <textarea name="description" ng-model="new_topic.description">description</textarea><br> <label>category</label><br> <select name="category" ng-model="new_topic.category"> <option value="html">html</option> <option value="javascript">javascript</option> <option value="ruby">ruby</option> <option value="python">pyhton</option> <option value="php">php</option> <option value="ios">ios</option> </select><br> <input type='submit' value='submit' ng-click='addtopic($storage.user._id)'> </form> </div> login.html
<div ng-controller='usercontroller'> <h3>register</h3> <form> <label>name</label><br> <input type='text' name="name" ng-model='new_user.name'><br> <label>email</label><br> <input type='email' name="email" ng-model='new_user.email'><br> <label>password</label><br> <input type='password' name="password" ng-model='new_user.password'><br> <input type='submit' value='create' ng-click='adduser()'> </form> </div> <div ng-controller='logincontroller'> <h3>login</h3> <form> <label>email</label> <input type='email' name="email" ng-model='user.email'><br> <label>password</label><br> <input type='password' name="password" ng-model='user.password'><br> <input type='submit' value='login' ng-click='getuser()'> </form> </div> script.js
var myapp = angular.module('fullmean_app', ['ngroute','ngstorage']); myapp.config(function ($routeprovider) { $routeprovider .when('/',{ templateurl: 'partials/login.html' }) .when('/dashboard',{ templateurl: 'partials/dashboard.html' }) .when('/topics',{ templateurl: 'partials/topic.html' }) .when('/users',{ templateurl: 'partials/user.html' }) .otherwise({ redirectto: '/' }); }); myapp.factory('userfactory', function($http, $location, $localstorage, $sessionstorage) { var factory = {}; console.log("im @ user factory") factory.adduser = function(info, callback) { $http.post('/create', info).success(function(output){ callback(output); }) } return factory; }); myapp.factory('topicfactory', function($http, $location, $localstorage, $sessionstorage) { var factory = {}; factory.addtopic = function(info, callback) { console.log("im @ topic factory") $http.post('/create_topic', info).success(function(output){ callback(output); }) } return factory; }); myapp.factory('loginfactory', function($http, $location, $localstorage, $sessionstorage) { var factory = {}; factory.getuser = function(info, callback) { $http.post('/login', info).success(function(output){ callback(output); }) } return factory; }); myapp.controller('usercontroller', function($scope, userfactory, topicfactory, $localstorage, $sessionstorage, $location) { console.log("entered user controller"); $scope.adduser = function() { console.log("im @ controller") var user_repack ={ name: $scope.new_user.name, email: $scope.new_user.email, password: $scope.new_user.password, created_at: new date() } userfactory.adduser(user_repack, function(data) { $scope.users = data; $scope.new_user = {}; }); } }) myapp.controller('logincontroller', function($scope, loginfactory, $localstorage, $sessionstorage, $location) { $scope.getuser = function(){ console.log("entered getuser controller") var user_repack = { email: $scope.user.email, password: $scope.user.password } loginfactory.getuser(user_repack, function(data){ $location.path('/dashboard') $scope.users = data console.log($scope.users, "$scope.users") $scope.$storage = $localstorage.$default({ user: data }); console.log($scope.$storage.user.name); }); } $scope.logout = function(){ console.log("logged out"); $localstorage.$reset(); $location.path('/') } }) myapp.controller('topiccontroller', function($scope, topicfactory, $localstorage, $sessionstorage) { $scope.addtopic = function(input){ console.log("hey im here"); console.log(input, "input console"); var topic_repack = { topic: $scope.new_topic.topic, description: $scope.new_topic.description, category: $scope.new_topic.category, user_id: input } console.log(topic_repack); topicfactory.addtopic(topic_repack, function(data){ $scope.topics = data; $scope.new_topic = {}; }); } }) the server side code working fine, user registration working, login form grab user object. add topic working fine upto point well.
this chrome console printing
im sure small cant see it. appreciate in advance .. thanks
have updated code, segregated controllers avoid confusion , still nothing, whats wird if see ive added
console.log($scope.$storage.user.name);
after setting data in local storage inside logincontroller. console.log name field in chrome javascript console. not printing in dashboard.html
fixed setting data in $rootscope instead of $scope.
logincontroller
myapp.controller('logincontroller', function($scope, $rootscope, loginfactory, $localstorage, $sessionstorage, $location) { $scope.getuser = function(){ console.log("entered getuser controller") var user_repack = { email: $scope.user.email, password: $scope.user.password } loginfactory.getuser(user_repack, function(data){ $location.path('/dashboard') $rootscope.users = data console.log($rootscope.users, "rootscope") }); } $scope.logout = function(){ console.log("logged out"); (var in $rootscope) { if (i.substring(0,1) !== '$') { delete $rootscope[i]; } } $location.path('/') } }) the logout function made of answered q how reset $rootscope?
Comments
Post a Comment