Question

为什么我在header.html中更改了我的select选项（已经包含在index.html中，如下所示：

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

由于某种原因，更改没有传播到main.html中调用{{vm.selectedCurrency}}的位置。为什么会这样？

<强烈> 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;
}

Answer 1

可以有两种方法来解决这个问题。

您已经在使用ng-controller="MainController as vm"，您的标头html有自己的ng-controller，这又会再次创建MainController的另一个实例。该平均标头具有其自己的范围，与main.html的{{1}}控制器不同，并且所选值存储在新控制器实例中。从MainController删除ng-controller可以解决您的问题，通过删除它，标题html将可以访问主html控制器范围。
如果上述原因不是原因，您可以创建一个服务来在Angular应用程序的不同组件之间共享数据。在这种情况下，header.html将保存在可共享的数据服务中。

更新选择下拉列表时，ng-model不会更新

1 个答案: