2016-04-17 100 views
0

我試圖從一個控制器獲取經度和緯度值(使用google maps API),並將其發送到另一個控制器。 爲此,我正在使用工廠。但是,將信息發送到工廠或讀取信息似乎存在問題。使用工廠將數據從一個控制器傳遞到AngularJS中的另一個控制器

.factory('loc', function(){ 
var location = {}; 

return { 
setProperty: function(latitude, longitude){ 
    location.lat = latitude; 
    location.lng = longitude; 
}, 
getProperty: function(){ 
    return location; 
} 
}; 
}); 

第一控制器(谷歌地圖)

.controller('MapCtrl', function($scope, $ionicLoading,loc) { 

if (navigator.geolocation) { 

navigator.geolocation.getCurrentPosition(function(pos) { 
loc.setProperty(pos.coords.latitude, pos.coords.longitude) 
... 

第二控制器中,我有:

.controller('callCtrl', function($scope,$state,loc) { 
$scope.updateTask = function(data) { 

    task.location_lng = loc.getProperty().lng; 
    task.location_lat = loc.getProperty().lat; 
... 

回答

0

參見運行代碼在這裏... http://play.ionic.io/app/a24d56659129

HTML

<!DOCTYPE html> 
<html> 
    <head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> 
    <link href="https://code.ionicframework.com/1.0.0/css/ionic.min.css" rel="stylesheet"> 
    <script src="https://code.ionicframework.com/1.0.0/js/ionic.bundle.js"></script> 
    </head> 
    <body ng-app="app"> 
    <ion-pane ng-controller="MainCtrl"> 
     <ion-header-bar class="bar-stable"> 
     <h1 class="title">Awesome App</h1> 
     </ion-header-bar> 
     <ion-content class="padding"> 
     <button class="button button-assertive" ng-click="setLocation()">Set Property</button><br/><br/> 
     <button class="button button-assertive" ng-click="getLocation()">Get Property</button><br/><br/> 
     <button class="button button-assertive" ng-click="clearLocation()">Clear Property</button> 
     </ion-content> 
    </ion-pane> 
    </body> 
</html> 

app.js這裏

var app = angular.module('app', ['ionic']); 

app.controller('MainCtrl', function($scope,loc) { 

    // 

    $scope.setLocation = function() { 
    loc.setProperty(100, 150) 
    } 


    $scope.getLocation = function() { 
    alert(JSON.stringify(loc.getProperty())); 
    } 

    $scope.clearLocation = function() { 
    loc.setProperty("", "") 
    } 


}); 

app.factory('loc', function() { 
    var location = {}; 

    return { 
    setProperty: function(latitude, longitude){ 
     location.lat = latitude; 
     location.lng = longitude; 
    }, 
    getProperty: function(){ 
     return location; 
    } 
    }; 
}); 

更完整的例子http://play.ionic.io/app/f4332405a2c1

0

這個工程:

var app = angular.module('plunker', []); 

app.controller('MainCtrl', function($scope,loc) { 
    loc.setProperty(10,20); 
}); 


app.controller('SubCtrl', function($scope,loc) { 

    $scope.updateData = function(){ 
    //this is the change 
    $scope.lat = loc.getProperty().lat; 
    $scope.lng = loc.getProperty().lng; 
    } 
}); 

app.factory('loc', function() { 
    var location = {}; 

    return { 
    setProperty: function(latitude, longitude) { 
     location.lat = latitude; 
     location.lng = longitude; 
    }, 
    getProperty: function() { 
     return location; 
    } 
    }; 
}); 

演示:http://plnkr.co/edit/aWEEEjGmsnwMMtAAUZKV?p=preview

相關問題