計算距離，在Codepen中工作，不在項目中

Question

我有一個可運行的Codepen here，它只是計算兩個GPS座標之間的距離（thanks to the author！）。

但是，當我複製代碼粘貼到我的一個html模板foir一個Ionic/AngularJS項目（我還沒有在獨立的js文件中外化腳本），代碼不再工作了。一個主意 ？謝謝。

HTML & sript：

<ion-view >  
    <ion-nav-buttons side="left"> 
    <button class="button button-icon button-clear ion-navicon" menu-toggle="left"> 
    </button> 
    </ion-nav-buttons> 
    <ion-nav-title> 
     <img class="navigation_bar_logo"src="img/WM_name_transparent_color.png"> 
    </ion-nav-title>  


    <ion-content class="background_lightgray" overflow-scroll="true" ng-controller="loadingCtrl"> 

    <span >the distance btw and house is <span id="dist"></span> which is awesome </span> 
    <p id="dist2"></p> 


<ion-list> 
    <ion-item ng-controller="loadingCtrl" bindonce ng-repeat= "restaurant in restaurantList " href="#"> 

    <article class="item_frame"> 
     <div class="marker_left_container"> 
      <img class="venue_rest_marker" ng-src="{{restaurant.icon}}"> 
      <span class="venu_type_text">{{restaurant.venueType}}</span> 
      <span class="distance_from_user_rest">0.7 km</span> 
      <span class="distance_from_user_rest2">from current location</span> 
     </div> 
     <div class="restaurant_details_container"> 
      <h1 class="restaurant_name_inlist">{{restaurant.Name}}</h1> 
      <span class="restaurant_detail_inlist2">{{restaurant.subCuisine}}<br> {{restaurant.subsubCuisine}}</span> 
      <span class="restaurant_address">{{restaurant.address}}, <br> </span> 
      <span class="restaurant_address">{{restaurant.cp}}, {{restaurant.city}} <br><br></span> 
      <span class="restaurant_others">{{restaurant.phoneNumber}}<br> </span> 
      <span class="restaurant_others">{{restaurant.website}}<br> <br></span> 


     </div> 
    </article><!--main article frame 1 --> 

    </ion-item> 
    </ion-list> 



    </ion-content> 
    </ion-view> 

    <script> 
    var GreatCircle = { 
    validateRadius: function(unit) { 
    var r = {'KM': 6371.009, 'MI': 3958.761, 'NM': 3440.070, 'YD': 6967420, 'FT': 20902260}; 
    if (unit in r) return r[unit]; 
    else return unit; 
}, 

distance: function(lat1, lon1, lat2, lon2, unit) { 
    if (unit === undefined) unit = 'KM'; 
    var r = this.validateRadius(unit); 
    lat1 *= Math.PI/180; 
    lon1 *= Math.PI/180; 
    lat2 *= Math.PI/180; 
    lon2 *= Math.PI/180; 
    var lonDelta = lon2 - lon1; 
    var a = Math.pow(Math.cos(lat2) * Math.sin(lonDelta) , 2) + Math.pow(Math.cos(lat1) * Math.sin(lat2) - Math.sin(lat1) * Math.cos(lat2) * Math.cos(lonDelta) , 2); 
    var b = Math.sin(lat1) * Math.sin(lat2) + Math.cos(lat1) * Math.cos(lat2) * Math.cos(lonDelta); 
    var angle = Math.atan2(Math.sqrt(a) , b); 

    return angle * r; 
}, 

bearing: function(lat1, lon1, lat2, lon2) { 
    lat1 *= Math.PI/180; 
    lon1 *= Math.PI/180; 
    lat2 *= Math.PI/180; 
    lon2 *= Math.PI/180; 
    var lonDelta = lon2 - lon1; 
    var y = Math.sin(lonDelta) * Math.cos(lat2); 
    var x = Math.cos(lat1) * Math.sin(lat2) - Math.sin(lat1) * Math.cos(lat2) * Math.cos(lonDelta); 
    var brng = Math.atan2(y, x); 
    brng = brng * (180/Math.PI); 

    if (brng < 0) { brng += 360; } 

    return brng; 
}, 

    destination: function(lat1, lon1, brng, dt, unit) { 
    if (unit === undefined) unit = 'KM'; 
    var r = this.validateRadius(unit); 
    lat1 *= Math.PI/180; 
    lon1 *= Math.PI/180; 
    var lat3 = Math.asin(Math.sin(lat1) * Math.cos(dt/r) + Math.cos(lat1) * Math.sin(dt/r) * Math.cos(brng * Math.PI/180)); 
    var lon3 = lon1 + Math.atan2(Math.sin(brng * Math.PI/180) * Math.sin(dt/r) * Math.cos(lat1) , Math.cos(dt/r) - Math.sin(lat1) * Math.sin(lat3)); 

    return { 
     'LAT': lat3 * 180/Math.PI, 
     'LON': lon3 * 180/Math.PI 
    }; 
} 

} 

    document.getElementById("dist").innerHTML = Math.round((GreatCircle.distance(48.853139, 2.368999, 48.826136, 2.321793) * 10)/10); 

Answer 1

找到了解決辦法，請在這裏看到working Plunker

Controller.js：

var wmapp = angular.module('wmapp', ['wmapp.factory_restaurants','greatCircles']) 

// RESTAURANTLIST CONTROLLER 
.controller('restaurantlistController', function ($scope, $rootScope, restaurantsFactory,position,GreatCircle) { 
    "use strict"; 
    $scope.restaurantList = restaurantsFactory.getRestaurants(); //call to restaurantfactory 
    $scope.position = position; 

    $scope.distanceTo = function(restaurant) { 
    var distance = GreatCircle.distance(restaurant.long,restaurant.lat, position.longitude, position.latitude) 
    restaurant.distance = distance; 
    distance = distance.toFixed(1); 
    return distance; 
} 
}) 


.factory('position', function($rootScope){ 

    console.log('building position') 

    var position = {}; 

     // 1ST/AUTO GEOLOCATION OF USER 
     // displays a popup to indicate current user location - (disabled) 
     // onSuccess Callback - This method accepts a Position object, which contains the current GPS coordinates 
    var onSuccess = function(position2) { 

      console.log(position2.coords.latitude) 
      console.log(position2.coords.longitude) 

      position.latitude = position2.coords.latitude; 
      position.longitude = position2.coords.longitude; 

      $rootScope.$digest() 
     }; 

    function onError(error) { // onError Callback receives a PositionError object 
     alert('code: ' + error.code + '\n' + 
       'message: ' + error.message + '\n'); 
    } 

    navigator.geolocation.getCurrentPosition(onSuccess, onError); 

    return position; 

})