Question

当我使用routeProvider时，我的控制器无法与ng-view一起使用。当我将ng-controller包含在主体中时，它会起作用，但是当我将其删除时，它不会。有人可以帮忙检查我的工作吗？帮助将不胜感激！ PS：我确实添加了脚本文件。

索引：

    <head>
      <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script src="js\angular.min.js"></script>
        <script src="js\angular-route.min.js"></script>
        <script src="controller\searchControl.js"></script>
        <script src="js\data.js"></script>
      <!--  <script src="controller\searchControl.js"></script> -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
        <link rel="stylesheet" href="css/style.css">
    </head>
    <body ng-controller="searchController">
    <header ng-include="'views/header.html'"></header>
    <main ng-view></main>
    </body>

Data.js：

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

      myApp.config(['$routeProvider', function($routeProvider){

          $routeProvider
            .when('/displayAuditorium', {
              templateUrl: 'views/displayAuditorium.html',
              controller: 'searchController'
            })
            .when('/displayExhibition', {
              templateUrl: 'views/displayExhibition.html',
              controller: 'searchController'
            }).otherwise({
              redirectTo: '/home'
            })
      }]);


      myApp.controller('searchController', ['$scope','$http', function($scope, $http){


            $scope.displayA = function() {

              $http({
                  method: 'GET',
                  url: 'https://developers.onemap.sg/publicapi/themeapi/retrieveTheme?queryName=auditoriums&token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOjMsInVzZXJfaWQiOjMsImVtYWlsIjoicHVibGljQXBpUm9sZUBzbGEuZ292LnNnIiwiZm9yZXZlciI6ZmFsc2UsImlzcyI6Imh0dHA6XC9cL29tMi5kZmUub25lbWFwLnNnXC9hcGlcL3YyXC91c2VyXC9zZXNzaW9uIiwiaWF0IjoxNTM3ODYwNTIxLCJleHAiOjE1MzgyOTI1MjEsIm5iZiI6MTUzNzg2MDUyMSwianRpIjoiNmVhNzA3NTk5OWM1NGZlZjQ0ZDFkMzEyZTkyMmEzMmUifQ.q_MiRnCT_2owbMFfCcpVVSECOTellwvojAY5Wwz0xJY'
                  }).then(function successCallback(response) {
                    console.log(response.data);
                    $scope.auditoriums = response.data.SrchResults;
                  }, function errorCallback(response) {
                    console.log(response);
                  });
            };

            $scope.displayE = function() {

              $http({
                  method: 'GET',
                  url: 'https://developers.onemap.sg/publicapi/themeapi/retrieveTheme?queryName=exhibitioncentres&token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOjMsInVzZXJfaWQiOjMsImVtYWlsIjoicHVibGljQXBpUm9sZUBzbGEuZ292LnNnIiwiZm9yZXZlciI6ZmFsc2UsImlzcyI6Imh0dHA6XC9cL29tMi5kZmUub25lbWFwLnNnXC9hcGlcL3YyXC91c2VyXC9zZXNzaW9uIiwiaWF0IjoxNTM4MDA5MTkzLCJleHAiOjE1Mzg0NDExOTMsIm5iZiI6MTUzODAwOTE5MywianRpIjoiNWFlNWI4MGU4ZDdmYzljZTE5ZjM2Njk2YmY0ZTg1OGQifQ.hw0a-rhRqoJubgIGl9IfP7lpn7LY-_KNQjUY8Nft1P4'
                  }).then(function successCallback(response) {
                    console.log(response.data);
                    $scope.exhibitions = response.data.SrchResults;
                  }, function errorCallback(response) {
                    console.log(response);
                  });
            };

      }]);

显示：

    <table>
        <!--    <th ng-repeat="(key,val) in auditorium">
                    {{ key }}
                  </th> -->
          <tbody>
              <tr ng-repeat="auditorium in auditoriums" ng-if="$index > 0">
                  <td>{{ auditorium.NAME }}</td>
                  <td>{{ auditorium.ADDRESSBUILDINGNAME }}</td>
                 <td>{{ auditorium.ADDRESSBLOCKHOUSENUMBER }}</td>
                  <td>{{ auditorium.ADDRESSPOSTALCODE }}</td>
                  <td>{{ auditorium.ADDRESSSTREETNAME}}</td>
              </tr>
          </tbody>
    </table>

ONclick函数显示代码：

         <div class="nav-links">
          <a href="#!/displayAuditorium" ng-click="displayA()">Auditorium</a>
          <a href="#!/displayExhibition" ng-click="displayE()">Exhibition</a>
        </div>

AngularJS控制器无法与routeProvider一起使用

0 个答案: