Question

我正在构建我的第一个Angular App，它允许用户根据许多标准搜索供应商数据库。其中一个标准是它们的位置和与供应商的距离。

我使用了vs-google-autocomplete directive，这是链接到Google地图API的好方法。但是，我对应用程序中的视图中此位置数据的持久性存在问题。

解释它目前是如何运作的。用户输入其搜索条件，根据用户搜索条件显示所有潜在供应商的快照（这已通过自定义指令实现）。然后，用户可以单击以阅读有关供应商的更多信息，这会将他们带到供应商的整页（更多详细信息等）。正是在这个阶段，位置数据丢失了。

我已经创建了一个服务来存储来自搜索查询其他方面的信息，这些信息一直很好（除了位置数据）。

问题是，当用户离开页面时，位置输入字段会自动重置，从而将位置字段重置为空。但是，我无法在代码中看到它在做什么。

有没有人对如何解决这个问题有任何想法？

下面的代码（遗憾的是我无法在JSFiddle中实际使用自定义指令，但希望它能够很好地了解我想要实现的目标）：

App.factory("searchquery", function() {
  return {};
});

App.controller('searchController', ['$scope', '$routeParams', '$rootScope', 'searchquery',
  function($scope, $routeParams, $rootScope, searchquery) {

    //Create a search query object

    $scope.searchquery = {};

    //Inject the searchquery service to ensure data persistency when in searchController pages

    $scope.searchquery = searchquery;

    //DEAL WITH GOOGLE AUTOCOMPLETE ADDRESSES
    //Restricts addresses to South Africa only

    $scope.options = {
      componentRestrictions: {
        country: 'ZA'
      }
    };

    //Creates an object to store the address information and parses it into its consitutent parts
    $scope.searchquery.address = {
      name: '',
      components: {
        streetNumber: '',
        street: '',
        city: '',
        state: '',
        countryCode: '',
        country: '',
        location: {
          lat: '',
          long: ''
        }
      }
    };
  }
]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<form name="Search">
  <!-- LOCATION -->
  <!-- ask the user to specify their location -->
  <div class="form-group">
    <label for="address">Address</label>
    <input vs-google-autocomplete="options" ng-model="searchquery.address.name" vs-street-number="searchquery.address.components.streetNumber" vs-street="searchquery.address.components.street" vs-city="searchquery.address.components.city" vs-state="searchquery.address.components.state"
    vs-country-short="searchquery.address.components.countryCode" vs-country="searchquery.address.components.country" vs-latitude="searchquery.address.components.location.lat" vs-longitude="searchquery.address.components.location.long" type="text" name="address"
    id="address" class="form-control">
  </div>
</form>

谢谢！

杰克

Answer 1

我不知道您的位置数据，但您可以通过两种方式在视图中保留数据：

您提及的服务
嵌套视图

请查看下面的演示或jsfiddle。

服务数据不会在演示中共享，但也可以通过将其注入其他视图来实现。

如果数据是异步的，您应该查看ui-router的resolve。然后在调用视图的控制器之前加载数据。

angular.module('demoApp', ['ui.router'])
    .config(AppConfig)
    .factory('demoService', DemoService)
    .controller('demoController', DemoController);


function AppConfig($stateProvider, $urlRouterProvider) {
    $urlRouterProvider.otherwise('/');
    $stateProvider.state('home', {
        url: '/',
        template: 'HELLO from home route <input ng-model="text"/>'+
        '<div ui-view=""></div'
    })
        .state('home.profile', {
        url: '/profile',
            template: 'Hello from profile <input ng-model="text"/>'
    })
    .state('otherView', {
        url: '/other',
        controller: 'demoController',
        /*resolve: {
            text: function(demoService) {
                console.log(demoService);
                return demoService.get();
            }
        },*/
        template: 'Hello from other scope <input ng-model="text" ng-change="updateService(text)"/>'
    });
}

AppConfig.$inject = ['$stateProvider', '$urlRouterProvider'];

function DemoService() {
    return {
        _text: 'I am stored in service.',
        set: function(text) {
            this._text = text;
        },
        get: function() {
            return this._text;
        }
    }
}

function DemoController($scope, demoService) {
    $scope.text = demoService.get();
    $scope.updateService = function(newValue) {
        console.log(newValue);
        demoService.set(newValue);
    };
}

DemoController.$inject = ['$scope', 'demoService'];

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.15/angular-ui-router.js"></script>
<div ng-app="demoApp">
    <div ui-view=""></div> 
    <a ui-sref="home">home</a>
 <a ui-sref="home.profile">profile</a>
 <a ui-sref="otherView">other</a>
</div>

使用vs-google-autocomplete

1 个答案: