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>

在此页面中，我想显示传递的值。我full plunkr code就在这里。请帮帮我。

Answer 1

如果您使用ui-router，那么您可以使用stateparameters掌握导航手中的所有魔力。

请勿使用普通的javascript导航，而是使用$state.go

您可以使用$stateParams的{{1}}来浏览视图。

检查，我在ui-router

上添加了可选参数latitude

<强> routes.js

state change

您的 mapcontroller.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'
    })
})

<强> newcontroller.js ：

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

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

这是您的Plunker链接。

Check the changed plunker

如何使用Angular.js

1 个答案: