如何使用Angular.js将参数传递给不同页面

Question

我需要一些帮助。我需要使用Angular.js将一些值传递给不同的页面。我在下面解释我的代码。

<div class="input-group bmargindiv1 col-md-12"> 
    <span class="input-group-addon ndrftextwidth text-right oditek-form" style="width:180px">Latitude:</span> 
    <input type="text" name="latitude" id="latitude" class="form-control oditek-form" placeholder="Add Latitude coordinate" ng-model="latitude" ng-keypress="clearField('businessno');"> 
</div> 
<div class="input-group bmargindiv1 col-md-12" ng-if=" latitude"> 
    <a ng-click="demo()" target="_blank" href="">Display Location On The Map</a> 
</div> 

这里我需要将Latitude字段值传递到另一个页面，该页面在新选项卡中打开。我的控制器端代码如下。

var newCustomer=angular.module('Spesh'); 
newCustomer.controller('newController',function($scope,$state){ 
    $scope.demo=function(){ 
    var base_url = "index.html#" 
    var url = $state.href('map', {}); 
    window.open(base_url+url,'_blank'); 
    } 
}) 

map.html：

<div>Hello</div> 
<div id="dvMap" style="width:1000px; height:1000px;">{{latitude}}</div> 

在此页面中我想显示传递value.My full plunkr code在这里。请帮帮我。

Answer 1

如果您使用ui-router，您可以通过使用stateparameters导航掌控所有魔法。

不要使用普通的JavaScript导航，使用$state.go代替

可以使用ui-router的$stateParams通过视图导航。

检查，我就state change添加一个可选的参数latitude

routes.js

var Admin = angular.module('Spesh', ['ui.router']); 
Admin.config(function($stateProvider, $urlRouterProvider, $locationProvider) { 
    $urlRouterProvider.otherwise('/'); 
    $stateProvider 
    .state('/', { 
     url: '/', 
     templateUrl: 'login.html', 
     controller: 'loginController' 
    }) 
    .state('new', { 
     url: '/new', 
     templateUrl: 'new.html', 
     controller: 'newController' 
    }) 
    .state('map', { 
     url: '/map?latitude', 
     templateUrl: 'map.html', 
     controller: 'mapController' 
    }) 
}) 

你mapcontroller.js：

var login=angular.module('Spesh'); 
login.controller('mapController',function($scope,$state,$stateParams){ 
    alert($stateParams.latitude); 
$scope.latitude = $stateParams.latitude; 
}) 

newcontroller.js ：

var newCustomer=angular.module('Spesh'); 
newCustomer.controller('newController',function($scope,$state){ 
    $scope.demo=function(){ 
    var base_url = "index.html#" 
    $state.go("map", {latitude: $scope.latitude}); 

    -------to open in a new tab------- 

    $state.go("map", {latitude: $scope.latitude}); 
    var url = $state.href('map', {latitude: $scope.latitude}); 
    window.open(url,'_blank'); 


    } 
}) 

$state.go("map", {latitude: $scope.latitude});，这是很重要的线

要在新标签

$state.go("map", {latitude: $scope.latitude}); 
var url = $state.href('map', {latitude: $scope.latitude}); 
window.open(url,'_blank'); 

这里公开赛是你Plunker链接。

Check the changed plunker