2016-07-15 38 views
2

我在一個混合應用程序中使用離子框架,該應用程序有一個頁面,可以在當前中間顯示當前年份。左右兩個箭頭分別會減少和增加。該模塊在android上工作正常,但在ios上進行測試時,它會顯示一些不符合年份綁定前綴的不需要的值。顯示不需要的值的離子框架綁定

該值看起來很好,但當綁定得到更新時,它顯示了這樣的事情。代碼如下所示。

(function() { 
    angular.module('surprise') 
     .controller('calendarController', [calendarController]); 
    function calendarController() { 
     var ref = this; 
     ref.today = moment(); 
     ref.year = ref.today.year(); 
     ref.prev = ref.year -1; 
     ref.next = ref.year+1; 
     ref.isActiveMonth = function(month) { 
      if(month === ref.today.month()) { 
       return true; 
      } 
      return false; 
     }; 
     ref.prevYear = function() { 
      ref.year -= 1; 
      console.log(ref.year); 
     }; 
     ref.nextYear = function() { 
      ref.year +=1; 
      console.log(ref.year); 
     } 
    } 
})(); 

視圖模板

<ion-view> 
    <ion-nav-title> 
     <div class="title header-text"> 
      <i class="icon"><img src="image/create_icon4.png" class="full_width" /></i> 
      <span>{{'CALENDAR' | translate}}</span> 
     </div> 
    </ion-nav-title> 
    <ion-content> 
    <section class="recent_row"> 
    <div class="cale_main"> 
     <div class="bar bar-subheader year-select"> 
      <a ng-click="vm.prevYear();" class="align_left"><i class="icon"><img src="image/arrow-left.png" /></i><span>{{vm.prev}}</span></a> 
      <h2 class="title">{{vm.year}}</h2> 
      <a ng-click="vm.nextYear();" class="align_right"><span>{{vm.next}}</span><i class="icon"><img src="image/arrow-right.png" /></i></a> 
     </div> 
     <div class="row"> 
      <div class="menuview_main"> 
       <ul> 
        <li> 

         <a ui-sref="app.calendarMonth({year:vm.year, month:01})"> 
          <img ng-src="{{!vm.isActiveMonth(0) && 'image/cal-unselect.png' || 'image/cal-select.png'}}"/> 
          <h6>January</h6> 
         </a> 
        </li> 
        <li> 
         <a ui-sref="app.calendarMonth({year:vm.year, month:02})"> 
          <img ng-src="{{!vm.isActiveMonth(1) && 'image/cal-unselect.png' || 'image/cal-select.png'}}"/> 
          <h6>February</h6> 
         </a> 
        </li> 
        <li> 
         <a ui-sref="app.calendarMonth({year:vm.year, month:03})"> 
          <img ng-src="{{!vm.isActiveMonth(2) && 'image/cal-unselect.png' || 'image/cal-select.png'}}"/> 
          <h6>March</h6> 
         </a> 
        </li> 
        <li> 
         <a ui-sref="app.calendarMonth({year:vm.year, month:04})"> 
          <img ng-src="{{!vm.isActiveMonth(3) && 'image/cal-unselect.png' || 'image/cal-select.png'}}"/> 
          <h6>April</h6> 
         </a> 
        </li> 
        <li> 
         <a ui-sref="app.calendarMonth({year:vm.year, month:05})"> 
          <img ng-src="{{!vm.isActiveMonth(4) && 'image/cal-unselect.png' || 'image/cal-select.png'}}"/> 
          <h6>May</h6> 
         </a> 
        </li> 
        <li> 
         <a ui-sref="app.calendarMonth({year:vm.year, month:06})"> 
          <img ng-src="{{!vm.isActiveMonth(5) && 'image/cal-unselect.png' || 'image/cal-select.png'}}"/> 
          <h6>June</h6> 
         </a> 
        </li> 
        <li> 
         <a ui-sref="app.calendarMonth({year:vm.year, month:07})"> 
          <img ng-src="{{!vm.isActiveMonth(6) && 'image/cal-unselect.png' || 'image/cal-select.png'}}"/> 
          <h6>July</h6> 
         </a> 
        </li> 
        <li> 
         <a ui-sref="app.calendarMonth({year:vm.year, month:08})"> 
          <img ng-src="{{!vm.isActiveMonth(7) && 'image/cal-unselect.png' || 'image/cal-select.png'}}"/> 
          <h6>August</h6> 
         </a> 
        </li> 
        <li> 
         <a ui-sref="app.calendarMonth({year:vm.year, month:09})"> 
          <img ng-src="{{!vm.isActiveMonth(8) && 'image/cal-unselect.png' || 'image/cal-select.png'}}"/> 
          <h6>September</h6> 
         </a> 
        </li> 
        <li> 
         <a ui-sref="app.calendarMonth({year:vm.year, month:10})"> 
          <img ng-src="{{!vm.isActiveMonth(9) && 'image/cal-unselect.png' || 'image/cal-select.png'}}"/> 
          <h6>October</h6> 
         </a> 
        </li> 
        <li> 
         <a ui-sref="app.calendarMonth({year:vm.year, month:11})"> 
          <img ng-src="{{!vm.isActiveMonth(10) && 'image/cal-unselect.png' || 'image/cal-select.png'}}"/> 
          <h6>November</h6> 
         </a> 
        </li> 
        <li> 
         <a ui-sref="app.calendarMonth({year:vm.year, month:12})"> 
          <img ng-src="{{!vm.isActiveMonth(11) && 'image/cal-unselect.png' || 'image/cal-select.png'}}"/> 
          <h6>December</h6> 
         </a> 
        </li> 
       </ul> 
      </div> 
     </div> 
    </div> 
    </section> 
    </ion-content> 
</ion-view> 

當我在控制檯檢查它的值顯示,即使在iOS的很好,所以我想這是值得做的離子型框架的視圖更新。

+0

你可以添加完整的calendeController HTML代碼嗎? –

+0

@ArunGhosh查看更新的答案。我添加了代碼。 – Vignesh

回答

1

我解決了調試了幾個小時後的神祕感,這是由於iOS的行爲將電話號碼轉換成超鏈接的行爲。

的解決辦法是禁用,使用下面的meta標籤

<meta name="format-detection" content="telephone=no"> 

我希望這可以挽救別人的時間和frusturation。更多信息here