subhra subhra - 25 days ago 10
AngularJS Question

How to pass parameter to diffrent page using Angular.js

I need some help. I need to pass some value to different page using Angular.js. I am explaining my code below.

<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>


Here i need to pass the
Latitude
field value to another page which is opening in new tab. My controller side code is given below.

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>


In this page i want to display that passed value.My full plunkr code is here. Please help me.

Answer

If you use ui-router, you have all the magic in your hands of navigation using the stateparameters.

Dont use plain javascript navigations, use $state.go instead

You can use the $stateParams of ui-router to navigate through the views.

Check, I added an optional parameter latitude on state change

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'
    })
})

Your 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});

  }
})

$state.go("map", {latitude: $scope.latitude});, this is important line

Here is the your Plunker link.

Check the changed plunker

Comments