Question

我的角度应用程序之前正确加载了我的javascript，但它没有正确设置路由。我试图解决这个问题，但现在我的javascript警报甚至不会弹出，这意味着文件没有连接。有人能告诉我为什么部分searchRadius.html没有被加载到index.html吗？我是否正确地使用以下内容在index.html底部附近呈现视图：<div ui-view></div>？

index.html：

<!DOCTYPE html>
<html ng-app="app">
   <head>
      <link rel="stylesheet" href="example/assets/stylesheets/example.css">
      <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
      <script src="website_libs/dev_deps.js"></script>
      <script src="https://code.angularjs.org/1.3.6/angular.js"></script>
      <script src="dist/angular-ui-router.js"></script>
      <script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.underscore.js"></script>
      <script src="http://cdn.rawgit.com/nmccready/angular-simple-logger/0.0.1/dist/index.js"></script><script src="dist/angular-google-maps_dev_mapped.js"></script>
      <script src="getLoc.js"></script>
      <script src="searchRadius.js"></script>
      <script src='//maps.googleapis.com/maps/api/js?key=AIzaSyD_g7xCYEi-U54SYfTXQ_lukRsChkWgjXQ'></script>
      <title>Pet Locate</title>
      <!--NEW STUFF FROM TOM-->
   </head>
   <body style="height: 100%">
      <h1 style="text-align: center">Pet Locate</h1>
      <div ui-view></div>
   </body>
</html>

searchRadius.js：

(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('location', {
            url: '/:lat/:lon',
            templateUrl: 'searchRadius.html', //changed from  index to searchRadius.html
            controller: 'MapsCtrl',

            resolve: {
                resolveMap: function(MapService, $stateParams) {
                    return MapService.getData($stateParams.lat, $stateParams.lon).then(function(rsp) {
                        console.log(rsp);
                        return rsp;
                    }).catch(function(err) {
                        console.log(err);
                    })
                }
            }
        });

    })

    .config(['uiGmapGoogleMapApiProvider', function(GoogleMapApi) {
        GoogleMapApi.configure({
            key: 'AIzaSyCbRPhVlxgVwBC0bBOgyB-Dn_K8ONrxb_g',
            v: '3',
            libraries: 'weather,geometry,visualization'
        });
    }])


    .controller('MapsCtrl', ['$scope', "uiGmapLogger", "uiGmapGoogleMapApi", "$interval", "$state", "$stateParams", 'resolveMap',
        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
                $state.transitionTo('location', { //location is the state name
                    center: $stateParams.center,
                    radius: $scope.map.circle.radius
                }, {
                    notify: false
                });
            }, 1000); //end of interval function


        }
    ]); //end of controller

})(window, angular);

searchRadius.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>
</div>

Answer 1

我认为路由配置中的代码存在一些问题。

()

你可以删除它并再次加载页面吗？您在加载时是否在开发人员工具控制台中收到任何错误？

视图和控制器都没有加载到index.html

1 个答案: