2016-07-15 12 views
2

Ich verwende ionische Rahmen in einer hybriden App, die eine Seite haben, die das aktuelle Jahr in der Mitte anzeigt. Es gibt zwei Pfeile links und rechts, die das Jahr jeweils verringern und erhöhen. Dieses Modul funktioniert gut auf Android, aber wenn es auf ios getestet wird, zeigt es einige unerwünschte Werte, die den Jahresbindungen vorangestellt sind.ionische Rahmenbindung mit unerwünschten Werten

Der Wert sieht zunächst gut aus, aber wenn die Bindung aktualisiert wird, zeigt es so etwas. Der Code sieht wie folgt aus.

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

Die Ansicht Vorlage

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

Wenn ich es in der Konsole überprüfen zeigt der Wert in Ordnung, auch in iOS, so dass ich denke, das ist etwas, mit der Update-ionischem Rahmen zu tun.

+0

Können Sie den vollständigen Kalender-HTML-Code hinzufügen? –

+0

@ArunGhosh Siehe aktualisierte Antwort. Ich habe den Code hinzugefügt. – Vignesh

Antwort

1

Ich löste das Geheimnis nach dem Debuggen für Stunden, Dies wurde durch iOS-Verhalten der Umwandlung von Zahlen in Hyperlinks mit Telefonnummern verursacht.

Die Lösung ist zu deaktivieren, dass der folgenden Meta-Tag

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

mit hoffe, dass ich dies jemand andere Zeit und frusturation sparen kann. Weitere Informationen here

Verwandte Themen