Question

我正在尝试在main.html（我的主视图）和header.html（页面上的嵌入式模板）之间共享数据。我对这种方法有两个问题：

数据未显示在header.html的下拉列表中，除非我这样做....
执行1）创建另一个范围，因此在下次刷新之前，更改不会在整个应用程序中保持不变。

我的所有数据都保存在服务中，我希望每当用户更改下拉列表中的选项时，它都会实时更新。我使用ngStorage将数据存储在浏览器缓存中。

的index.html

  <div ng-include="'views/templates/header.html'"></div>
  <!-- main.html goes in view -->    
  <div ng-view=""></div>

了header.html

<header class="header-style-2">
   <select class="selectpicker" ng-model="vm.selectedCurrency" ng-options="o as o for o in vm.currencyList" ng-change="vm.setCurrency(vm.selectedCurrency)"></select>
</header>

main.html

<div class="details-sec"><a href="#">{{ product.name }}</a> <span class="font-montserrat">{{ product.price }} {{ vm.selectedCurrency }}</span> </div>

main.js - MainController

vm.currencyList = MainService.getCurrencyList();
vm.selectedCurrency = MainService.getCurrency();

vm.setCurrency = function(selectedCurrency) {
  vm.selectedCurrency = MainService.setCurrency(selectedCurrency);
};

main.js - MainService

function getCurrencyList()
{
  var currencyList = ['GBP', 'USD', 'EUR'];
  return currencyList;
}

function getCurrency() {
  if($localStorage.selectedCurrency) {
    return $localStorage.selectedCurrency;
  }
  return getCurrencyList()[0];
}

function setCurrency(newSelectedCurrency) {
  $localStorage.selectedCurrency = newSelectedCurrency;      
}

function resetCurrency() {
  $localStorage.selectedCurrency = getCurrencyList()[0];      
}

与服务共享数据但ng-model仍然无效

0 个答案: