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; }
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>
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);
6、禁止侧滑后退事件
$ionicConfigProvider.views.swipeBackEnabled(false);