Fetching Id from One Controller to Another in angularjs

Question

I have two app.js like frontapp.js and departmentapp.js In school.html which is under SchoolController.js belongs to frontapp.js I am getting all schools and departments by schoolId, when I am clicking on departmentName the page is redirecting to departmenthomepage which is under DepartmentHomeController.js belongs to departmentapp.js can any one suggest me how can I get departmentId when clicked on departmentName

SchoolController.js

$scope.getallschools = function() {
  SchoolService.getallschools().then(function(response) {
    $scope.allschools = response.data;
  });
}

In allschools itself I am getting departments by schoolId

schools.html

<div class="col-xs-12 col-sm-6 col-md-6" data-ng-repeat="school in allschools">
  <div class="row">
    <div class="col-xs-12 col-sm-12 col-md-12">
      <h5>{{school.schoolName}}</h5>
      <ul data-ng-repeat="department in school.departments">
        <li><a href="./department"> {{department.departName}}</a></li> 
      </ul>
    </div>
  </div>
</div>

DepartmentHomeController.js

$scope.departmentId = 20
DepartmentHomeService.getThemeForDepartment($scope.departmentId)
  .then(function(response) {
  console.log("received theme");
  if(response.data != undefined) {              
    $scope.cssFile = response.data; 
    console.log($scope.cssFile);
    $('head').append('<link rel="stylesheet" type="text/css" media="screen" 
      href='+$scope.csspath + $scope.cssFile +'>'); 
  } else {
    $('head').append('<link rel="stylesheet" type="text/css" media="screen" 
      href='+$scope.csspath + $scope.cssFile +'>'); 
  }
});

Here I hard coded departmentId how can I get departmentId dynamically by clicking on departmentName.

If you have different html pages, use routers like [ui-router](https://github.com/angular-ui/ui-router) to navigate through pages with passed id and other data. If you just want to pass id between controllers use Services or browser localStorage — Andrew, Aug 01 '17 at 07:34

score 1 · Answer 1 · answered Aug 01 '17 at 07:36

1

There are many ways to do it. If you are using ui router for managing states and controller you can pass ui-sref="stateName/:id".

Else In your href simply try to changing your url to like

<a href="/department/5">

It will work.

Else you can see how to communicate between two controllers it will help you a lot in understanding how communications happen

What's the correct way to communicate between controllers in AngularJS?

answered Aug 01 '17 at 07:36

Hemant Nagarkoti

434
2
12

1

i would not suggest you manually manipulate the URL when u are already using ui-router, let ui-router handle it for you – Syed Faizan Aug 01 '17 at 07:38
1

Yeah Right Syed Faizan! – Hemant Nagarkoti Aug 01 '17 at 07:39
I am using two app.js files.Schools page is in frontapp.js.And then from school I am displaying all the departments.After clicking any department it will get routed to Department home page which is under departmentapp.js. So, i need to get the departmentId when i click on any department.If i get the Id then i can display everything based on that specific department.The problem now is as it involves two app.js files that is frontapp and departmentapp.js I am not able to get that departmentId.In school.html I am giving link as – Sachin HR Aug 01 '17 at 08:03
So its better to change manually the url using jquery call a function it will modify the url pass that id in url and in your new controller fetch using location.href – Hemant Nagarkoti Aug 01 '17 at 08:03

Fetching Id from One Controller to Another in angularjs

1 Answers1