您的位置:首页 > 其它

ionic学习记录(三)

2016-06-23 15:28 246 查看
从现在开始进入了一种新的状态,对ionic多少熟悉了,进入了优化界面与修改bug的阶段;

1、onchange 绑定ngModel

ngChange指令是angularJs的一个内置指令,其功能类似于js的onchange,监测输入内容的变化,常用于表单,与ngModel连用。

比如,在select标签里面,我想实现点击option时触发一个事件,然后返回选中的该值。

<select id="" name="" ng-model="user.location" ng-change="getUserLocation">

<option ng-repeat="location in locations" ng-value="location" ng-bind="location"></option>

</select>

这样写就可以了,下面是controller的内容:

angular.module("user.controllers",[])

.controller('testController',function($scope){

    $scope.getUserLocation = function(){

        console.log($scope.user.location)

    }

})

如果在上面的html里面不写ng-model,只写了ng-change的话,会提示如下错误:

Controller 'ngModel', required by directive 'submitRequired', can't be found!

这只是select标签中,在input标签中,同样适用:

<input type="text" ng-model="modalName" ng-change="eventName" />

2、ionic 验证是否登录绝好的方法

在.run 或者 .config 中监听state的变更事件,也就是在路由去加载每个页面之前就判断登录状态,来决定要不要加载该页面,还是跳转到登录页去。

.run(function($ionicPlatform, $rootScope, $ionicHistory,$state) {

        var needLoginView = ["myclass","mycomment","myfavorite","myquestion","orderlist"];//需要登录的页面state

        $rootScope.$on('$stateChangeStart',function(event, toState, toParams, fromState, fromParams, options){ 

            if(needLoginView.indexOf(toState.name)>=0&&!$rootScope.isLogin){//判断当前是否登录

                $state.go("login");//跳转到登录页

                event.preventDefault(); //阻止默认事件,即原本页面的加载

            }

        })});

3、ionic中保活的方法

.factory('keepLiveService', function ($rootScope, $timeout,$interval,$http) {

var mystop;

var toDo = function () {
console.log("Hello World");
var serviceURL = 'http://' + sessionStorage.getItem('serviceHost') + ':' + sessionStorage.getItem('servicePort');
$http({
method: 'GET',
url: serviceURL+'/efdsefw',// ?storeId=+ $scope.storeId + '&beginDate=' + '2016/06/09' + "&endDate=" + '2016/06/20',//+'&employeeId='+$scope.persionInfo.employeeId
//data: $scope.formData,//pass in data as strings
// data: fd,
data: '',
headers: {'Content-Type': undefined},
transformRequest: angular.identity
}).success(function (data) {
}).error(function (error) {
})
};

/**
* fn:一个将被反复执行的函数。

delay:每次调用的间隔毫秒数值。

count:循环次数的数值,如果没设置,则无限制循环。

invokeApply:如果设置为false,则避开脏值检查,否则将调用$apply。

Pass:函数的附加参数。

$interval(fn,delay,[count],[invokeApply],[Pass]);
*/
mystop = $interval(toDo, 1000);

var stopNow = function () {
$interval.cancel(mystop);
}

return {
startKeepLive: function () {
return toDo();
},
stopKeepLive: function () {
return stopNow();
}
}
})


4、网络超时

$http({
method: 'POST',
url: $scope.serviceURL + '/mobile/session',
//data: $scope.formData,//pass in data as strings
data: fd,
headers: {
'Content-Type': undefined,
'token': uuid
},
timeout:5000,
transformRequest: angular.identity
})
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: