Question

在我的Ionic / Angular框架中，我更新服务中的2个变量（$ http.get（）。then（）块）：

for( var di = day; di <= endOfMonthDate; di++) {
  var flavor = days[di - 1];
  daysLeftCalendar.push( flavor[1]);    // dates right away !
}

var todaysFlavorIndex = -1;
for (var i = 0; i < days.length; i++ ) {
  if ((days[i])[0] == day) {
    todaysFlavorIndex = (days[i])[1];     
    todaysFlavorName = flavors[todaysFlavorIndex];    // only updates if you change tabs
  }
}

然后我的服务中有这些访问者方法，我的控制器会调用它们：

   return {
     // both of these are hit after switching to one of the two tabs which both reference these functions
    remainingFlavorIndexes: function() {
      return daysLeftCalendar 
    },
    getTodaysFlavorName: function() {
      return todaysFlavorName
    }
  };

然后在我唯一的控制器中，我公开了这样的变量：

  $scope.remainingFlavorIndexes = Calendar.remainingFlavorIndexes();    // this one copies over right away !!
  $scope.todaysFlavorName = Calendar.getTodaysFlavorName(); // this one doesn't

然后在我看来：

<div>  <!-- this one shows up right away -->
      {{remainingFlavorIndexes}}
</div>
<div>   <!-- these two only show up after switching tabs and returning -->
 <img class="scaled-image" src="img/{{todaysFlavorName[2]}}">
</div>
<div style="text-align: center;">
  {{todaysFlavorName[1]}}
</div>

我如何处理这两个变量完全相同，但todaysFlavorName为空（即使在.then调用返回后）？

为什么当我切换标签并回来时它们会被填充？

修改

剩下的风味指数应该是这样的：

[21,20,13,0,27,12,9,18,1,3,30,29,25,7,6,4,9,18,21,13]

每次都有效。

今天的FlavorName应该是：

[21, "peanut butter", "peanut_butter.jpg", "some meaningless text here"]

只有在切换标签后才能正常工作。

Answer 1

两者之间存在很大差异。如果是daysLeftCalendar：

服务有一个数组
控制器调用返回对该数组的引用的服务函数
http回调函数将元素推送到此数组

因此，控制器具有对服务中的数组的引用。每当在服务中修改数组时，它也会在控制器中进行修改，因为控制器和服务都共享对同一数组的引用。

如果是todaysFlavorName：

该服务定义引用数组的变量todaysFlavorName
控制器调用返回对该数组的引用的服务函数
http回调函数不会修改此数组。它为变量todaysFlavorName分配一个新数组。

因此，最后，控制器具有对原始数组的引用，而服务具有对新数组的引用。这解释了为什么视图中没有任何变化：控制器仍然引用旧数组。

当您更改选项卡时，我假设控制器已重新实例化，再次调用服务功能，并且控制器从服务中获取新值。

修复非常简单：始终从服务中获取要显示的值，而不是在控制器中缓存值。取代

$scope.todaysFlavorName = Calendar.getTodaysFlavorName();

通过

$scope.todaysFlavorName = function() {
    return Calendar.getTodaysFlavorName();
};

和

{{todaysFlavorName[1]}}

通过

{{todaysFlavorName()[1]}}

角度离子无法更新某些变量

1 个答案: