Angular.js中主模块的$ scope中的调用函数

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.

Answer 1

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); //...
}
}();

Answer 2

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); //...
  }
}();