CODEWITHSUNDEEP
angularjs
Sachin HR
Sachin HR

Reputation: 460

Passing id from one controller to another of different ng-app files

I have 2 js files namely collegeApp.js and branchApp.js. I have two controllers CollegeController.js which is inside collegeApp.js ng-app and BranchController.js which is inside branchApp.js ng-app.

From my html I am redirecting to another page.

Here is my html

<li data-ng-click="getBranchByBranchId(branch.branchId); setBranchId(branch.branchId)">
    {{branch.branchName}}
</li>

This html page is in collegeApp.js.After clicking on branch name I am calling method And its controller looks like this.

CollegeController.js

var CollegeController = function($scope, $rootScope, $http, $location, $route,CollegeService,$routeParams) {

    $rootScope.pageTitle = $route.current.title;

        $scope.getBranchId = function() {
        CollegeService.getBranchId().then(function(response) {
            $scope.branchId = response.data;
        });
    }

    $scope.setBranchId=function(branchId) {
      CollegeService.setBranchId(branchId);
    $rootScope.passBranchId = branchId;
      window.location.href="./branch?
      branchId='+$rootScope.passBranchId";//Here I am redirecting to branch page with id.//
    }
}

The branch page is in branchApp.js and above code is in collegeApp.js. Now in BranchController.js I am trying to catch branchId sent from previous page.

BranchController.js

var BranchController = function($scope, $rootScope, $http, $location, $route,BranchService,$routeParams) 
    {
      $scope.branchId = $rootScope.passBranchId;//Here i am trying to get branchId//
      console.log($scope.branchId);//I am getting undefined.
    }

I tried $rootScope,$routeParams.But none of them worked. Is there any possible way that i can pass branchId from collegeApp to branchApp? or am i missing something?

Upvotes: 0

Views: 715

Answers (3)

Sachin HR
Sachin HR

Reputation: 460

I finally found the solution.I just added this line and it worked.

Inside SchoolController.js

    $scope.setBranchId=function(branchId)
    {
      window.localStorage.setItem("branchId", branchId); 
    }

And in BranchController.js

    $scope.branchId =   window.localStorage.getItem("branchId");

Now i am able to use Id anywhere in controller and also i am able to pass Id from collegeApp.js to branchApp.js ng-apps.

Upvotes: 1

Aviro
Aviro

Reputation: 2155

I realized that you wanted to share information between multiple modules within the same application. Here is a completed code sample to test the scenario.

/**
 * Service definition which holds the passed values
 */
angular.module('myapp')
.config('collegeService', collegeService);
collegeService.$inject = [];

function collegeService() {
    var branchId = null;

    return {
        getBranchId:    getBranchId,
        setBranchId:    setBranchId
    };

    function getBranchId() {
        /**
         * Implement a promise based approach if the branch ID reads from an external source
         * else just return it as given below
         */
        return branchId;
    }

    function setBranchId(brId) {
        branchId = brId
    }
}

/**
 * First controller definition
 */
angular.module('myapp')
.controller('CollegeController', CollegeController);
CollegeController.$inject = ['$scope', 'collegeService'];

function CollegeController($scope, collegeService) {

    $scope.getBranchId = function() {
        /**
         * Use promise based approach as below if the read method returns a promise
         */
        collegeService.getBranchId().then(function(response) {
            $scope.branchId = response.data;
        });

        /**
         * Uses a simple approach as below if the read method returns the value
         */
        // $scope.branchId = collegeService.getBranchId();
    };

    $scope.setBranchId = function(branchId) {
        CollegeService.setBranchId(branchId);
    }
}

/**
 * Second controller definition
 */
angular.module('myapp')
.controller('BranchController', BranchController);
BranchController.$inject = ['$scope', 'collegeService'];

function BranchController($scope, collegeService) {
    $scope.init = function() {
        $scope.branchId = collegeService.getBranchId();
    };

    /**
     * Invokes the init method during the Controller getting instantiated
     */
    $scope.init();
}

Upvotes: 1

jtrdev
jtrdev

Reputation: 932

When redirecting your page use $location.path('/branch/' + branchId) Plus you already have $location in your controller.

Then you'll want to use $routeParams to find the id in your url.

Update route config to find params, should look like this

  $routeProvider
  ...  
  .when('branch/:branchId', {
        templateUrl: 'views/branches.html',
        controller: 'BranchController'
  })

Then get the value like so

$scope.branchId = $routeParams.branchId;

Upvotes: 1

Related Questions