2016-11-13 53 views
0

的範圍我使用兩個控制器,爲我的主頁。
1.處理搜索自動完成(谷歌地圖API來建議的位置)的控制器。
2.另一個控制器來處理頁面不能得到第二控withing相同的角速度文件

但第二控制器範圍的其餘部分只是沒有顯示出來。

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 
+2

你不需要重複定義的應用程序模塊。每當你將一個空數組傳遞給模塊時,它會嘗試創建一個新模塊。作爲第二個參數,您應該只有一個應用程序模塊,其中有[]。角度是大多數時候,開發人員友好。你控制檯爲你講述錯誤。 – Sreekanth

+0

在您創建模塊兩次時檢查控制檯是否有任何錯誤。創建模塊並把它分配給「window.app =應用」,然後使用相同的在第二控制器爲「VAR應用= window.app」 – Aruna

+0

@Sreekanth即使我都寫在同一個文件中的控制器只用一個模塊定義,同樣的問題依然存在。 – jack

回答

1

你在每個控制器文件中創建的angular module兩次。我已經通過在一個文件中創建一個模塊並將其分配給window.app然後在第二個文件中使用相同的模塊來改變這一點。

相反,你可以調用在第二個文件angular.module('myApp')沒有將返回第一個文件中創建的模塊的第二個參數。

// 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>

1

我使你的代碼,以達到兩個控制器。

看一看是

Plukr

而且在你的代碼和JavaScript基準是拋出一個異常SensorNotRequired可以在此link有待進一步探討。 我通過刪除url中的傳感器查詢字符串來修復它。

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

</script> 

要顯示情況下,它的工作,我可能已經添加在HTML中的拉布勒.. 有它一目瞭然。

+0

我解決了它從另一個答案 – jack

+0

哪兩個之一? – Aravind

+0

我的意思不是你的 – jack

相關問題