Angularjs在另一个页面中获取文本框的值

时间:2015-03-23 16:35:05

标签: angularjs

我对angularjs有疑问。我有一个index.html和arama.html以及arama_sonuc.html。在arama.html中,我有两个包含起始和结束地址的文本框(Google地图自动填充)。我想在arama_sonuc.html中显示这两个文本框的值。

您可以在下面看到我的源代码:

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

app.config(function($stateProvider, $urlRouterProvider) {
  // For any unmatched url, send to /index
  $urlRouterProvider.otherwise("/arama");

  $stateProvider
    .state('arama', {
      url: "/arama",
      templateUrl: "arama.html",
      controller: "aramaSayfasiniCagir"
    })
    .state('aramaSonuc', {
      url: "/aramaSonuc",
      templateUrl: "arama_sonuc.html"
      //controller: "aramaSayfasiniCagir"
    });
});

    app.controller('aramaSayfasiniCagir', function($scope, $location){
        $scope.LoginCheck = function() {
            $location.path("aramaSonuc");
        };
    });

    app.controller("inputCtrl",function ($scope) {

        $scope.result1 = '';
        $scope.options1 = {
            country: 'tr'
        };
        $scope.details1 = '';


        $scope.result2 = '';
        $scope.options2 = {
            country: 'tr'
        };
        $scope.details2 = '';
    });

这是一个演示插件:http://plnkr.co/edit/3vczoJLf7pc0TOocq6nA?p=preview

你能帮帮我吗?

1 个答案:

答案 0 :(得分:1)

您应该使用服务在控制器之间共享数据。这里有工作人员:

http://plnkr.co/edit/iTGl1bxVY73ao9kSqNQd?p=preview

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

app.config(function($stateProvider, $urlRouterProvider) {
  // For any unmatched url, send to /index
  $urlRouterProvider.otherwise("/arama");

  $stateProvider
    .state('arama', {
      url: "/arama",
      templateUrl: "arama.html",
      controller: "aramaSayfasiniCagir"
    })
    .state('aramaSonuc', {
      url: "/aramaSonuc",
      templateUrl: "arama_sonuc.html",
      controller: "aramaSayfasiniCagir"
    });
});

app.service('locationService', function() {
  this.details1 = '';
  this.details2 = '';
})

app.controller('aramaSayfasiniCagir', function($scope, locationService) {
    $scope.locationService = locationService;
});

app.controller("inputCtrl", function($scope, $location, locationService) {

  $scope.locationService = locationService;

  $scope.LoginCheck = function() {
    locationService.details1 = $scope.details1;
    locationService.details2 = $scope.details2;
    $location.path("aramaSonuc");
  };
  $scope.options1 = {
    country: 'tr'
  };


  $scope.options2 = {
    country: 'tr'
  };

});

<强> arama.html

<div ng-controller="inputCtrl">
  <div class="input-group input-group-lg">
    <span class="input-group-addon" id="sizing-addon1">
                <img style="width:16px;" src="img/location.png"/>
            </span>
    <input type="text" class="form-control" id="autocomplete" aria-describedby="sizing-addon1" details="details1" ng-autocomplete="result1" options="options1">
  </div>

  <div class="input-group input-group-lg">
    <span class="input-group-addon" id="sizing-addon2">@</span>
    <input type="text" class="form-control" id="autocomplete2" aria-describedby="sizing-addon1" details="details2" ng-autocomplete="result2" options="options2">
  </div>
  <input type='button' ng-click='LoginCheck()' value='send' />
</div>

<强> arama_sonuc.html

i want to display here the value of start and end adress 

 <p><pre>{{locationService.details1 | json}}</pre></p>
 <p><pre>{{locationService.details2 | json}}</pre></p>