Question

我在主页上使用两个控制器 1.处理搜索自动完成的控制器（谷歌地图api建议位置） 2.另一个处理页面剩余部分的控制器

但是第二个控制器的范围并没有显示出来。

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

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

Answer 2

我已经让你的代码到达两个控制器。

看看那是

<强> Plukr

同样在您的代码中，javascript引用引发了异常 SensorNotRequired ，可以在此link中进一步探讨。我通过删除网址中的传感器查询字符串来修复它。

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

</script>

为了展示它的工作原理，我可能在HTML中添加了一个标签。瞥一眼。

无法获得具有相同角度文件的第二个控制器的范围

2 个答案: