how to get the value from one controller to another controller and call the json using angularJS

Question

I am trying to build a app using HTML and angularJS.

Requirement is to have two autocomplete text boxes to get the city and name.

Am able to get those two both. not the problem for me is . Am not able to get the names based on the city selected(if no city is selected : show the names from all the cities && if city is selected the show the names from the city only)

Here is my code:

    <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">

<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.js"></script>



    <script src="https://code.angularjs.org/1.5.0/angular.js"></script>
    <script src="https://code.angularjs.org/1.5.0/angular-aria.js"></script>
    <script src="https://code.angularjs.org/1.5.0/angular-animate.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.1.1/angular-material.min.js"></script>

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.1.1/angular-material.min.css" />
    <link rel="stylesheet" href="style.css" />

        <script src="js/iHelixAngular.js"></script> 

    <title>Insert title here</title>


</head>

<body ng-app='myapp' layout="column" ng-controller="areaLocationController as ctrl" >

  <div class="col-md-3"  ng-controller="areaLocationController as ctrl" >
    <md-autocomplete flex
            md-selected-item="ctrl.selectedItem"
            md-search-text="ctrl.searchText"
            md-items="item in ctrl.querySearch(ctrl.searchText)"
            md-item-text="item.label"
            md-delay="300"
            md-floating-label="Area/City/Zip Code">
          <div layout="row" class="item" layout-align="start center">
            <!-- <img ng-src="{{item.avatar_url}}" class="avatar" /> -->
            &nbsp;&nbsp;
            <span md-highlight-text="ctrl.searchText">{{item.label}}</span> 
             <input type="hidden" ng-model="myservice.city"  name="label" id="label" value="{{item.label}}"/>

          </div>
          </md-autocomplete>
         </div> 
      <div class="col-md-3"  ng-controller="autocompleteController as ctrl1" >
        <md-autocomplete flex
                md-selected-item="ctrl1.selectedItem"
                md-search-text="ctrl1.searchAreaText"
                md-items="itemArea in ctrl1.queryAreaSearch(ctrl1.searchAreaText)"
                md-item-text="itemArea.label"
                md-delay="300"
                md-floating-label="Doctor/Speciality/Care Provider">
              <div layout="row" class="item" layout-align="start center">

                <span md-highlight-text="ctrl1.searchAreaText">{{itemArea.label}}</span>  
                <input type="hidden" ng-model="DocLabel"  name="DocLabel" id="DocLabel" value="{{itemArea.label}}"/>
                <input type="hidden" ng-model="doctorId" name="doctorId" id="doctorId" value="{{itemArea.doctorId}}"/>
                <input type="hidden" ng-model="specializationId" name="specializationId" id="specializationId" value="{{itemArea.specializationId}}"/ >
              </div>
              </md-autocomplete>
        </div>



  </body>
</html>

This is the JS file

var app = angular.module('myapp', ['ngMaterial']);


       app.service('myservice', function() {

                  this.city="";
          });
       app.controller("areaLocationController", function($http){

            this.querySearch = function(query){
            return $http.get("http://localhost:8080/iHelix2015/getLocationListMobile", {params: {q: query}})
            .then(function(response){
              return response.data.result;
            })
          }
        });
        app.controller("autocompleteController", ['$rootScope', '$scope', '$http','myservice',
                        function($rootScope,  myservice,$http){  
          this.queryAreaSearch = function(Area){
          this.myservice = myservice;
              /*alert(Area);*/
            var cityValue=myservice.city;

              return $http.get("http://localhost:8080/iHelix2015/getDocSearchListForAppMobile", {params: {searchDoc: Area,city:cityValue}})
              .then(function(response){
                return response.data.result;
              })
            }

        }]);

please tell me how to pass the city value along with the doctor_name in the second controller while passing the params to the json call.

Do you want to pass some values from "autocompleteController" controller to "areaLocationController" controller ? — kamlesh, Jan 18 '17 at 11:17
yes, I need to pass a value in the areaLocationController to the autocompleteController. Am new to this AngularJS, if its possible in single controller or any other formate to work similar please tell the example — HARISH, Jan 18 '17 at 11:55
Possible duplicate of [Creating common controller functions](http://stackoverflow.com/questions/11324202/creating-common-controller-functions) — Mistalis, Jan 18 '17 at 12:46

Manishz90 · Answer 1 · 2017-01-18T12:44:55.983

Please make following changes and see if it works:

Inject 'myservice' in 'areaLocationController' and assign it to a local variable 'myservice'.
Remove dependency '$scope' from dependency injection/annotation array of 'autocompleteController', annotation array should always be in sync with the parameters in the function declaration.

Here is the code with the changes:

var app = angular.module('myapp', ['ngMaterial']);

app.service('myservice', function() {
  this.city = "";
});

app.controller("areaLocationController", ['$http', 'myService',
  function($http, myService) {
    this.myService = myService.city;
    this.querySearch = function(query) {
      return $http.get("http://localhost:8080/iHelix2015/getLocationListMobile", {
          params: {
            q: query
          }
        })
        .then(function(response) {
          return response.data.result;
        });
    };
  }
]);

app.controller("autocompleteController", ['$rootScope', '$http', 'myservice',
  function($rootScope, myservice, $http) {
    this.queryAreaSearch = function(Area) {
      this.myservice = myservice;
      /*alert(Area);*/
      var cityValue = myservice.city;

      return $http.get("http://localhost:8080/iHelix2015/getDocSearchListForAppMobile", {
          params: {
            searchDoc: Area,
            city: cityValue
          }
        })
        .then(function(response) {
          return response.data.result;
        });
    };

  }
]);

can you tell me the full code with making changes to the present code — HARISH, Jan 18 '17 at 12:07

how to get the value from one controller to another controller and call the json using angularJS

1 Answers1