2017-10-15 52 views
1

为什么,当我改变了header.html(我选择选项,它已被列入的index.html如下:NG-模式不更新时选择下拉更新

<div ng-include="'views/templates/header.html'"></div> 

由于某种原因,变化不会传播到{{vm.selectedCurrency}}被称为在main.html中,为什么会出现这种情况?

了header.html

<header class="header-style-2" ng-controller="MainController as vm"> 
    <select class="selectpicker" ng-model="vm.selectedCurrency" ng-options="o as o for o in vm.currencyTypes" ></select> 
</header> 

main.html中

<div class="popular_product"> 
    <ul class="row">    
     <!-- New Arrival --> 
     <li class="col-sm-3" ng-repeat="product in vm.menNewArrivals"> 
     <div class="items-in"> 
      <!-- Image --> 
      <img ng-src="{{ product.image }}" style="height:400px; width: auto;"> 
      <!-- Hover Details --> 
      <div class="over-item"> 
      <ul class="animated fadeIn"> 
       <li><a href=""><i class="fa fa-info"></i></a></li> 
       <li><a href=""><i class="fa fa-retweet"></i></a></li> 
       <li><a href=""><i class="fa fa-heart-o"></i></a></li> 
       <li class="full-w"> <a href="#." class="btn">ADD TO CART</a></li> 
      </ul> 
      </div> 
      <!-- Item Name --> 
      <div class="details-sec"> 
      <a href="#">{{ product.name }}</a> 
      <span class="font-montserrat"> 
       {{ product.price }} {{ vm.selectedCurrency }} 
      </span> 
      </div> 
     </div> 
     </li> 
    </ul> 
    </div> 

主controller.js

vm.menNewArrivals = {}; 
vm.currencyTypes = MainService.getCurrencyTypes(); 
vm.selectedCurrency = vm.currencyTypes[0]; 

MainService.getMenNewArrivals().then(function(result) { 
    vm.menNewArrivals = result.data.menNewArrivals; 
}); 

主service.js

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

回答

1

有可能是解决这个问题的双向。

  1. 您已经在使用ng-controller="MainController as vm",你的头HTML有它自己的ng-controller,这又是一个创造的MainController另一个实例。这意味着标题有其自己的范围,不同于main.htmlMainController控制器,并将选定的值存储在新的控制器实例中。从header.html删除ng-controller将解决您的问题,通过删除它的标题HTML将有权访问主要的HTML控制器范围。
  2. 如果上面不是这个原因,你可以创建一个服务在Angular应用程序的不同组件之间共享数据。在这种情况下,selectedCountry将被保存在可共享数据服务中。
+0

谢谢,2)中服务的代码将如何? – methuselah