ionic 開發筆記

一、AngularJS 外部的控制器（DOM 事件、外部的回調函數如 jQuery UI 空間等）調用了 AngularJS 函數之
後，必須調用$apply。在這種狀況下，你須要命令 AngularJS 刷新自已（模型、視圖等）， $apply 就是
用來作這件事情的。
代碼舉例：

 1 var app = angular.module("myApp", []);
 2           app.controller('firstController',function($scope){
 3               $scope.name = 'hello';
 4               setTimeout(function(){
 5                   //$scope.name = 'hi';
 6                   $scope.$apply(function(){
 7                       $scope.name = 'hi';
 8                   });
 9               },2000);
10               /*$timeout(function(){
11                $scope.name = 'hi';
12                },2000);*/
13 
14               $scope.show = function(){
15                   alert('adssdg');
16                   $scope.name = 'hi點擊事件發生了';
17               };
18 
19           });

 

二、使用item-input可使多文本在同一行，可是左邊的圖標和第一個文本重疊，使用padding解決

css代碼

.col-padding{
    padding:0 40px 0 40px;
}

View Code

html代碼

<div class="item item-input item-icon-left item-icon-right">
                <i class="icon ion-location"></i>
                <h2  class="col-padding">當前位置</h2>
                <input type="text"/>
                
                <i class="icon ion-ios-arrow-right"></i>
            </div>

View Code

 

三、input在一些條件下不容許編輯，使用disable readonly等等會使input變灰，須要額外控制css樣式，

使用 onfocus="this.blur()效果最好，目前沒有發現其餘問題。舉例：

<input type="text" ng_model="FCostType.FName" onfocus="this.blur()" ></input>

 

四、ionic 右上角信息 class="item-note"

<span class="item-note">
{{newDate(item.FDate)}}
</span>

 

五、調用 $ionicModal後，在modal中對搜索字段隨時監聽，可是設置watch監聽失效的問題；不知道爲何要先設置一個對象，而後給對象設置屬性，再監聽該對象的屬性即沒有問題；

也就是說，$ionic.watchvar='';若是你直接監聽watchvar沒用，須要先$ionic.watchObj={};再$ionic.watchObj.watchvar='';對watchvar進行監聽就OK 了。

案例代碼以下：

$scope.searchData={};
    $scope.searchData.data="";
    
    $scope.$watch('searchData.data',function(newVal,oldVal){
        //console.log('searchData.data changed:');
        if($scope.modal.isShown())
        {
            $scope.loadSearListData();
        }
         //console.log(newVal);
         //console.log(oldVal);
         },true); 

View Code

 

六、禁止側滑後退事件

$ionicConfigProvider.views.swipeBackEnabled(false);