ionic 开发笔记

1、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           });

 

2、使用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

 

3、input在一些条件下不允许编辑，使用disable readonly等等会使input变灰，需要额外控制css样式，

使用 onfocus="this.blur()效果最好，目前没有发现其他问题。举例：

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

 

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

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

 

5、调用 $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

 

6、禁止侧滑后退事件

$ionicConfigProvider.views.swipeBackEnabled(false);

posted @ 2016-02-26 19:02  niky  阅读(347)  评论(0)  编辑  收藏  举报