CODEWITHSUNDEEP
javascriptangularjs
jack
jack

Reputation: 77

can not get the scope of 2nd controller withing same angular file

I am using two controllers for my home page.
1. A controller to handle search autocomplete (google maps api to suggest locations).
2. Another controller to handle remaining parts of the page

But the scope of the second controller just does not show up.

EJS:

<head>
    <title><%= title %></title>
    <link rel="stylesheet" href="/bootstrap/bootstrap.min.css">
    <script src="bootstrap/jquery.min.js"></script>
    <script src="bootstrap/bootstrap.min.js"></script>
    <script src="angular/angular.min.js"></script>
    <script src="angular/locationController.js"></script>
    <script src="angular/mainController.js"></script>
    <link rel='stylesheet' href='/stylesheets/style.css' />

    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
    <meta http-equiv="Pragma" content="no-cache" />
    <meta http-equiv="Expires" content="0" />

    <script>
      var map;
      function initMap() {
        map = new google.maps.Map(document.getElementById('map'), {
          center: {lat: -34.397, lng: 150.644},
          zoom: 8
        });
      }
    </script>
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA67uROXPqm2Nnfg5HOTHttn2C7QRn1zIo&libraries=places&sensor=false"></script>

    <script src="ngAutocomplete/script.js"></script>
    <script src="ngAutocomplete/ngAutoComplete.js"></script>
  </head>



            <li class="ul_One"  ng-controller="searchBarController">

                    <div id="inLine" class="col-lg-12 ul_Two" style="">
                        <input type="text" class="form-control ul_Three" id="Autocomplete" placeholder="Where to?" ng-autocomplete="result1" details="details1" options="options1" ng-model="destination">
                    </div>

            </li>

            <li class="ul_One"  ng-controller="testController">

                    <div id="inLine" class="col-lg-12 ul_Two" style="">
                        <input type="text" class="form-control ul_Three" id="Autocomplete" placeholder="Where to?" ng-autocomplete="result1" details="details1" options="options1" ng-model="destination">
                    </div>

            </li>

locationController.js:

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

//home page main controller  //home page main controller  
//home page main controller  //home page main controller  
app.controller('searchBarController', function($scope, $http) {


    $scope.test = "Hello";
    console.log("$scope.test ", $scope.test);

});
//home page main controller  //home page main controller  
//home page main controller  //home page main controller

mainController.js:

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

//home page main controller  //home page main controller  
//home page main controller  //home page main controller  
app.controller('testController', function($scope, $http) {


    $scope.test = "Hello";
    console.log("$scope.test ", $scope.test);

});
//home page main controller  //home page main controller  
//home page main controller  //home page main controller

Upvotes: 0

Views: 58

Answers (2)

Aravind
Aravind

Reputation: 41581

I have made your code to reach both the controllers.

Have a look at that is

Plukr

Also in your code and the javascript reference was throwing an exception SensorNotRequired which can be further explored in this link. I fixed it by removing the sensor querystring in the url.

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA67uROXPqm2Nnfg5HOTHttn2C7QRn1zIo&libraries=places">

</script>

To show case it is working I might have added a lable in the HTML.. Have a glance at it.

Upvotes: 1

Aruna
Aruna

Reputation: 12022

You have created the angular module two times in each controller file. I have changed this by creating a module in one file and assign it to window.app then use the same in the second file.

Instead, you can call angular.module('myApp') in the second file without the second argument which will return the module created in the first file.

// File 1: locationController.js

(function(){
var app = angular.module('myApp', []);
window.app = app;

//home page main controller  //home page main controller  
//home page main controller  //home page main controller  
app.controller('searchBarController', function($scope, $http) {


    $scope.destination = "Hello";
    //console.log("$scope.test ", $scope.test);

});
//home page main controller  //home page main controller  
//home page main controller  //home page main controller
})();

// File 2: mainController.js:

(function(){
var app = window.app;
// It can be also as below,
//var app = angular.module('myApp');
  
//home page main controller  //home page main controller  
//home page main controller  //home page main controller  
app.controller('testController', function($scope, $http) {


    $scope.destination = "Hello";
    //console.log("$scope.test ", $scope.test);

});
//home page main controller  //home page main controller  
//home page main controller  //home page main controller
})();

angular.bootstrap(document, ['myApp']);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<li class="ul_One"  ng-controller="searchBarController">

                    <div id="inLine" class="col-lg-12 ul_Two" style="">
                        <input type="text" class="form-control ul_Three" id="Autocomplete" placeholder="Where to?" ng-autocomplete="result1" details="details1" options="options1" ng-model="destination">
                    </div>

            </li>

            <li class="ul_One"  ng-controller="testController">

                    <div id="inLine" class="col-lg-12 ul_Two" style="">
                        <input type="text" class="form-control ul_Three" id="Autocomplete" placeholder="Where to?" ng-autocomplete="result1" details="details1" options="options1" ng-model="destination">
                    </div>

            </li>

Upvotes: 1

Related Questions