2016-11-13 43 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

相关问题