javascript - can not get the scope of 2nd controller withing same angular file -
i using 2 controllers home page.
1. controller handle search autocomplete (google maps api suggest locations).
2. controller handle remaining parts of page
but scope of second controller 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
you have created angular module 2 times in each controller file. have changed creating module in 1 file , assign window.app use same in second file.
instead, can call angular.module('myapp') in second file without second argument return module created in 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; // can 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>
Comments
Post a Comment