javascript - Angular.js $modal Scope issues -
javascript - Angular.js $modal Scope issues -
i trying create simple login modal username , password. accomplish this, used mill handling login variables across controllers:
.factory('userfactory', function($http) { var userinfo = { islogged: false }; homecoming { getuserinfo: function () { homecoming userinfo; }, loginnonce: function(loginobj) { homecoming $http.get('http://exmple.com/?json=get_nonce&controller=auth&method=generate_auth_cookie').success( function(data, status, headers, config) { var nonce = data.nonce; }); }, login: function(loginobj) { var nonce = loginobj.nonce; homecoming $http.get('http://example.com/?json=auth/generate_auth_cookie&nonce='+nonce+'&username='+loginobj.username+'&password='+loginobj.password).success(function(data, status, headers, config) { if (data.status == 'ok') { var userinfo = { islogged: true, username: data.user.username, useravatar: data.user.avatar, firstname: data.user.firstname, lastname: data.user.lastname } homecoming userinfo; } else { var userinfo = { islogged: false, username: '', errormsg: data.error } homecoming userinfo; } }) .error(function(data, status, headers, config) { var userinfo = { islogged: false, username: '', errormsg: 'server error!' } homecoming userinfo; }); } } });
than have login controller initiates modal , handles login attempts:
var logincontroller = function($scope, $http, $modal, userfactory) { $scope.userinfo = userfactory.getuserinfo(); $scope.logged = $scope.userinfo.islogged; $scope.open = function() { $scope.modalinstance = $modal.open({ templateurl: 'views/modal.html', controller: modalinstancectrl, size: 'lg', resolve: { userinfo: function () { homecoming $scope.userinfo; } } }); } $scope.login = function() { var loginobj = { username: $scope.username, password: $scope.password } var results = userfactory.login(loginobj); userfactory.loginnonce().then(function(data) { var nonce = data.data.nonce; loginobj.nonce = data.data.nonce; userfactory.login(loginobj).then(function(data) { if(data.data.error) { $scope.errormsg = data.data.error; } else { $scope.ok(); } }); }); } }
here modal instance controller:
var modalinstancectrl = function($scope, $modalinstance, $http, userfactory, userinfo) { $scope.userinfo = userfactory.getuserinfo(); $scope.ok = function () { $modalinstance.close($scope.results); console.log(userinfo); }; $scope.cancel = function () { $modalinstance.dismiss('cancel'); }; }
this logincontroller
partial looks like:
<div id="main_bar" class="header" ng-controller="logincontroller"> <ul class="nav nav-pills pull-right" > <li class="col-sm-3 col-md-3 col-lg-2 row pull-right userblock" ng-show="logged"><div class="baravatar" style="background-image: url({{ useravatar }});"></div><div class="username">{{ userfirstname }} {{ userlastname }} <span ng-click="logout()">logout</span></div></li> <li ng-hide="logged" ><a ng-href="" ng-click="open()">login</a></li> <li ng-hide="logged"><a ng-href="#/register">signup</a></li> </ul> </div>
this template partial login controller displays current user's information:
the login process works , proper variables set factory. however, can't seem updated userinfo
object logincontroller's
scope. i've used console know mill working properly. know simple scope issue, have attempted has failed work.
you need add together success callback modal able update userinfo on logincontroller scope. first assignment $scope.userinfo have done when controller gets instanciated.
$scope.open = function() { $scope.modalinstance = $modal.open({ templateurl: 'views/modal.html', controller: modalinstancectrl, size: 'lg', resolve: { userinfo: function () { homecoming $scope.userinfo; } } }).result.then(function (userinfo) { $scope.userinfo = userinfo; // or $scope.userinfo = userfactory.getuserinfo(); }); }
also in modal utilize both resolve , userfactory obtaining same information, need 1 of two. , should login function not in modalinstancectrl?
javascript angularjs angularjs-scope
Comments
Post a Comment