角度离子无法更新的一些变量 [英] angular ionic fails to update for some variables

查看:120
本文介绍了角度离子无法更新的一些变量的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

在我离子/角框架我更新服务中2个变量()的$ http.get(当时()块):

In my Ionic / Angular framework I update 2 variables inside a service (an $http.get().then() block):

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
  }
}

然后,我有我的服务,这些存储器方法,得到由我的控制器名为:

Then I have these accessor methods in my service that get called by my controller:

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

然后在我的唯一的控制器我揭露这些变量是这样的:

Then in my only controller I expose these variables like this:

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

然后在我的观点:

Then in my view:

<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是空的(甚至是。然后调用返回之后)?

How is it that I'm handling these 2 variables exactly the same, but todaysFlavorName is empty (even after the .then call returns)?

和为什么它,当我切换标签,然后回来,他们被填充?

And why is it that when I switch tabs and come back they are populated?

编辑:

什么是应该进入剩余的味道指标是这样的:

What is supposed to go into remaining flavor indexes is something like this:

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

和它的作品每一次。

什么是应该进入todaysFlavorName是:

What is supposed to go into todaysFlavorName is:

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

和它的作品后,才切换标签。

And it works only after I switch tabs.

推荐答案

有既是有很大的区别。在的情况下, daysLeftCalendar

There is a big difference between both. In the case of daysLeftCalendar:


  • 服务有一个数组

  • 控制器调用返回的引用数组
  • 服务功能
  • 的HTTP回调函数推元素,这个数组

因此​​,控制器具有到在服务中的数组的引用。每当阵列在服务修改,它也修改了的控制器,由于控制器和服务都共享对相同数组的引用。

So, the controller has a reference to the array that is in the service. Whenever the array is modified in the service, it's also modified in the controller, since the controller and the service both share a reference to the same array.

在的情况下, todaysFlavorName


  • 服务定义了一个变量 todaysFlavorName 引用数组

  • 控制器调用返回的引用数组
  • 服务功能
  • 的HTTP回调函数不修改该数组。它分配一个新的数组变量 todaysFlavorName

  • the service defines a variable todaysFlavorName referencing an array
  • the controller calls the service function that returns a reference to that array
  • the http callback function doesn't modify this array. It assigns a new array to the variable todaysFlavorName.

那么,在结束时,该控制器具有与原始数组的引用,而服务具有对新的数组的引用。这就解释了为什么没有在视图中进行更改:控制器仍引用旧数组

So, in the end, the controller has a reference to the original array, whereas the service has a reference to the new array. Which explains why nothing changes in the view: the controller still references the old array.

当您更改标签,我假设控制器重新实例化,服务功能再次调用,控制器回来从服务的新值。

When you change tab, I assume the controller is reinstantiated, the service function is called again, and the controller gets back the new value from the service.

解决方法是很简单:永远获得的价值,从服务中显示,而在高速缓存控制器中的价值。替换

The fix is quite easy: always get the value to display from the service, instead of caching the value in the controller. Replace

$scope.todaysFlavorName = Calendar.getTodaysFlavorName();

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

{{todaysFlavorName[1]}}

{{todaysFlavorName()[1]}}

这篇关于角度离子无法更新的一些变量的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆