AngularJS $stateProvider URL 结果为空白页

Question

我正在使用 angular-ui-router 并设置了第二个控制器，类似于我的第一个正在工作的控制器，但是第二个控制器中的路由没有正确路由应用程序.谁能告诉我哪里出错了？

html 第一个控制器（正常工作）：

<div style="height: 100%"> <!--took out: ng-if="map.center !== undefined"-->
    <ui-gmap-google-map 
                        center='map.center'
                        zoom='map.zoom'
                        draggable='map.draggable'
                        dragging='map.dragging'
                        refresh='map.refresh'
                        options='map.options'
                        events='map.events'
                        pan='map.pan'>


        <ui-gmap-circle 
                        center='map.circle.center'
                        radius='map.circle.radius'
                        fill='map.circle.fill'
                        stroke='map.circle.stroke'
                        clickable='map.circle.clickable'
                        draggable='map.circle.draggable'
                        editable='map.circle.editable'
                        visible='map.circle.visible'
                        events='map.circle.events'>

        </ui-gmap-circle>


    </ui-gmap-google-map>
<script src='//maps.googleapis.com/maps/api/js?key=AIzaSyD_g7xCYEi-U54SYfTXQ_lukRsChkWgjXQ'></script>
</div>

第一个控制器（正常工作）：

(function (window, ng) {
    ng.module('app', ['uiGmapgoogle-maps', 'ui.router'])



  .config(function ($stateProvider) { //had: , $stateChangeError included in the function parameters, but that caused error 
      $stateProvider.state('searchRadius', {
          url: '/:lat/:lon',
          templateUrl: 'searchRadius.html', //changed from  index to searchRadius.html
          controller: 'MapsCtrl',
      });
  })


    .controller('MapsCtrl', ['$scope', "uiGmapLogger", "uiGmapGoogleMapApi", "$interval", "$state", "$stateParams",
      function ($scope, $log, GoogleMapApi, $interval, $state, $stateParams) {
          $log.currentLevel = $log.LEVELS.debug;
          var center = { latitude: parseFloat($stateParams.lat), longitude: parseFloat($stateParams.lon) };
          alert(JSON.stringify(center));
          Object.freeze(center); //caused TypeError: Cannot assign to read only property ('latitude') ...

          console.log($stateParams);

          $scope.map = {
              center: center,
              pan: false,
              zoom: 16,
              refresh: false,
              events: {},
              bounds: {}
          };

          $scope.map.circle = {
              id: 1,
              center: center,
              radius: 500, //(current time - date lost)*km/hour
              stroke: {
                  color: '#08B21F',
                  weight: 2,
                  opacity: 1
              },

              fill: {
                  color: '#08B21F',
                  opacity: 0.5
              },
              geodesic: false, // optional: defaults to false
              draggable: false, // optional: defaults to false
              clickable: true, // optional: defaults to true
              editable: false, // optional: defaults to false
              visible: true, // optional: defaults to true
              events: {
                  dblclick: function () {
                      $log.debug("circle dblclick");
                  },
                  radius_changed: function (gObject) {
                      var radius = gObject.getRadius();
                      $log.debug("circle radius radius_changed " + radius);
                  }
              }
          }

          //Increase Radius:
          $interval(function(){
                $scope.map.circle.radius += 30; //dynamic var
          }, 1000); //end of interval function


      } ]); //end of controller

})(window, angular);

第 2 html（空白页）：

<!--Add ability to input location as address-->

<div>
        <ui-gmap-google-map 
                        center='map.center'
                        zoom='map.zoom'
                        draggable='map.draggable'
                        dragging='map.dragging'
                        refresh='map.refresh'
                        options='map.options'
                        events='map.events'
                        pan='map.pan'>


        <ui-gmap-circle 
                        center='map.circle.center'
                        radius='map.circle.radius'
                        fill='map.circle.fill'
                        stroke='map.circle.stroke'
                        clickable='map.circle.clickable'
                        draggable='map.circle.draggable'
                        editable='map.circle.editable'
                        visible='map.circle.visible'
                        events='map.circle.events'>

        </ui-gmap-circle>


    </ui-gmap-google-map>

    <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDWKJRXSux3dAdEYOYqjkoi2MCW8dutFbY&callback=initMap">
    </script>
</div>

第二个控制器（产生没有错误的空白页面）：

(function (window, ng) {
    ng.module('app', ['uiGmapgoogle-maps', 'ui.router'])



  .config(function ($stateProvider) { //had: , $stateChangeError included in the function parameters, but that caused error 
      $stateProvider.state('getLocation', {
          url: '/getLocation',
          templateUrl: 'getlocation.html', //changed from  index to searchRadius.html
          controller: 'GetlocationCtrl',
      });
  })



    .controller('GetlocationCtrl', ['$scope', "uiGmapLogger", "uiGmapGoogleMapApi", "$state", "$stateParams",
      function ($scope, $log, GoogleMapApi, $state, $stateParams) {
          $log.currentLevel = $log.LEVELS.debug;
          var center = { latitude: 49.22, longitude: -122.66 }; //default center
          alert(JSON.stringify(center));

          console.log($stateParams);

          $scope.map = {
              center: center,
              pan: false,
              zoom: 16,
              refresh: false,
              events: {},
              bounds: {}
          };

          $scope.map.circle = {
              id: 1,
              center: center,
              radius: 500, //(current time - date lost)*km/hour
              stroke: {
                  color: '#08B21F',
                  weight: 2,
                  opacity: 1
              },

              fill: {
                  color: '#08B21F',
                  opacity: 0.5
              },
              geodesic: false, // optional: defaults to false
              draggable: false, // optional: defaults to false
              clickable: true, // optional: defaults to true
              editable: false, // optional: defaults to false
              visible: true, // optional: defaults to true
              events: {
                  dblclick: function () {
                      $log.debug("circle dblclick");
                  },
                  radius_changed: function (gObject) {
                      var radius = gObject.getRadius();
                      $log.debug("circle radius radius_changed " + radius);
                  }
              }
          }


      } ]); //end of controller

})(window, angular);

Answer 1

(i) 您使用的 $routerProvider 不一定是必需的

(ii) 另外，当我检查你的代码时，你在加载第二个控制器后加载了第一个模块。像这样将您的脚本放在 index.html ,

<script src="searchRadius.js"></script> 
<script src="getLoc.js"></script>

AngularJS $stateProvider URL 结果为空白页

AngularJS $stateProvider URL results in blank page

state

angularjs

angular-ui-router