Call function in the main module's $scope in Angular.js

Question

I have an Angular.js project and the main module defined like this:

var app = angular.module('app', [ /* Some libraries... */
    'UserControllers' ]);

The main module has a controller define like this:

app.controller('MainController', function($scope, $location) {
    var UserId = null;
    var Username = null;

    $scope.setUserInfo = function(userId, username) {
        UserId = userId;
        Username = username;
    };
}

In the main page of the website the user can load an external login form and load it into a modal like this:

    function showModal($uibModal, $previousState) {
        $previousState.memo("modalInvoker");
        var stateName = this.name;
        var templateUrl = this.templateUrl;
        $uibModal.open({
            templateUrl: templateUrl,
            controller: function ($uibModalInstance, $scope) {
                var isopen = true;
                $uibModalInstance.result.finally(function() {
                    isopen = false;
                    $previousState.go("modalInvoker");
                });
                $scope.close = function () {
                    $uibModalInstance.dismiss('close');
                };
                $scope.$on("$stateChangeStart", function(evt, toState) {
                    if(!toState.$$state().includes[stateName]) {
                        $uibModalInstance.dismiss('close');
                    }
                });
            }
        });
    }

The form in the loaded page uses a controller defined in a file loaded in the home-page like this:

(function() {
"use strict";

var login = angular.module("UserControllers", [  ]);
login.controller("LoginCtrl", function($http, $scope) {
    /* Login checks and requests... */ 
    /* Need to call the setUserInfo */
}
}();

After doing all the login checks I basically need to call the function setUserInfo defined in the scope of the main module/page. I can close the modal by calling $scope.$parent.close() but I can't call setUserData because it appears to be in another scope.

Thanks a lot in advance for your help.

Riad Baghbanli · Accepted Answer · 2016-03-02 21:22:11Z

2

Use rootScope for user data:

app.controller('MainController', function($scope, $rootScope, $location) {
    var UserId = null;
    var Username = null;

    $rootScope.setUserInfo = function(userId, username) {
        UserId = userId;
        Username = username;
    };
}

(function() {
"use strict";

var login = angular.module("UserControllers", [  ]);
login.controller("LoginCtrl", function($http, $scope, $rootScope) {
    /* Login checks and requests... */ 
    $rootScope.setUserInfo(uid, un); //...
}
}();

answered Mar 2, 2016 at 21:22

Riad Baghbanli

3,3361 gold badge16 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

xuT Over a year ago

Works really nicely, thanks. Is there another way to do this without using $rootScope?

alphapilgrim Over a year ago

Yes, I advise using a service.

Riad Baghbanli Over a year ago

it depends, TheTux, in some cases it is better to use eventing, so affected scope emits, root scope broadcasts and any scope interested in event acts on it. But specifically for logged in user information I always recommend rootScope.

alphapilgrim · Accepted Answer · 2016-03-02 21:44:44Z

var myApp = angular.module('example.services');
 function example () {
   Var user = this;
     Student.setData = function(data) {
        user.data = data;
      }
    }
myApp.service('example',[example]);

now include the service in your controller && modal controller :

app.controller('MainController', function($scope, $rootScope, $location, example) {
//now call your set user data function to share data from modal to  controller
var UserId = null;
var Username = null;

    $rootScope.setUserInfo = function(userId, username) {
      UserId = userId;
      Username = username;
    };
}

    (function() {
"use strict";

var login = angular.module("UserControllers", [example ]);
login.controller("LoginCtrl", function($http, $scope, $rootScope, example) {
  /* Login checks and requests... */ 
  $rootScope.setUserInfo(uid, un); //...
  }
}();

Collectives™ on Stack Overflow

Call function in the main module's $scope in Angular.js

2 Answers 2

3 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Related