在視圖中保留數據AngularJS與vs-google-autocomplete

Question

我正在構建我的第一個Angular App，它允許用戶根據許多條件搜索供應商數據庫。其中一個標準是它們的位置和與供應商的距離。

我已經使用了vs-google-autocomplete directive，這是一種連接到google maps 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-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>