发表于 | 更新于： | 分类于 | 评论： | 阅读次数：

我们用ionic打包的app在真机上需要处理手机硬键盘的返回键,下面提供几种方法:

首先,放上官方文档和源码地址,懒得看英文的,就先看我这个吧

$ionicPlatform.registerBackButtonAction(callback, priority, [actionId])

这个方法一般放在app.js文件下的run()中,controller中不起作用,实例如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
$ionicPlatform.ready(function() {
    $ionicPlatform.registerBackButtonAction(function(e) {
        //1.可以通过$state.current或$location.href()来判断处于哪个页面
        if($state.current.name=="order"){
            //2.因为run方法中无法注入$scope,只能注入$rootScope,此处通过$rootScope来判断子scope中的变量
            if($rootScope.$$childHead.button1.state){
                e.preventDefault();
                return false;
            }else{
                $window.history.back();
            }
        }else if($state.current.name=="map"){
            if($rootScope.$$childHead.locInterval){
                $interval.cancel($rootScope.$$childHead.locInterval);
                console.debug('清除map计时器');
            }
            $window.history.back();
        }
        //3.阻止默认的行为
        e.preventDefault();
        return false;
    },101)//101优先级常用于覆盖‘返回上一个页面’的默认行为  
})

阅读全文 »

发表于 | 更新于： | 分类于 | 评论： | 阅读次数：

本文主要参考:http://www.ngnice.com/posts/2c8208220edb94

angular不推荐直接操作dom,建议使用双向绑定的数据来操作

1.从controller绑定到html上,有时候数据改变了,但是html并不刷新

原因:一般是$apply导致的,对于大多数操作，$apply都会自动执行，所以不用担心，但是如果使用了angular之外的功能，比如直接调用了setTimeout函数、挂接了jquery的事件、使用了jquery的ajax操作等等.那么系统就没有机会帮你调用$apply，界面也就没有机会刷新了，但是你如果之后又做了其他会导致$apply的操作，你会发现以前“欠下”的那次界面刷新被正常执行了

例:

1
2
3
4
//这种情况下你在页面中绑定的time变量将不会被自动刷新
setTimeout(function() {
  $scope.time = new Date()
}, 1000);

解决方案:

(1). 手动刷新:

1
2
3
4
5
setTimeout(function() {
  $scope.$apply(function() {
    $scope.time = new Date();
  });
}, 1000);

(2). 使用angular内置指令:因为angular内置指令最后会调用$apply()

1
2
3
4

$timeout(function() {
  $scope.time = new Date();
});

阅读全文 »

发表于 | 更新于： | 分类于 | 评论： | 阅读次数：

有这样一个题目:已知一对兔子每一个月可以生一对小兔子，而一对兔子出生后第三个月开始生小兔子假如一年内没有发生死亡，则一对兔子一年内能繁殖成多少对？

之前有人做过,我却怎么想都不明白,今天自己终于想出了方法,唉,这算是我的逻辑觉醒吗?

方法1:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
var arr=new Array(12);
window.onload=function () {
    for(var i=0;i<12;i++){
        arr[i]=new Object();
        arr[i].count=0;
        arr[i].birth=0;
    }
    arr[0].count=1;
    arr[1].count=1;

    for (var i = 0; i < 12; i++) {
        addBirth(i);
        if(i>1){
            arr[i].count=dealCount(i);
        }
        console.log(i+1+"月为:"+arr[i].count);
    }
}
//增加兔子的月份
function addBirth (x) {
     for(var i=0;i<x;i++){
        arr[i].birth++;
     }
}
//计算当前月的数量=初始时的一对兔子+当前月1个月前的所有能生小兔子的数
function dealCount (x) {
    var rabbit=arr[0].count;
     for(var i=0;i<x;i++){
        if(arr[i].birth>1){
            rabbit+=arr[i].count;
        }
     }
     return rabbit;  
}
阅读全文 »

发表于 | 更新于： | 分类于 | 评论： | 阅读次数：

本文参考自http://www.cnblogs.com/mliudong/p/4151594.html

实例演示

Promise是一种模式，以同步操作的流程形式来操作异步事件，避免了层层嵌套，可以链式操作异步事件。

Service:HelloWorld的定义如下:

1
2
3
4
5
6
7
8
9
10
11
12
.factory('HelloWorld', function($q, $timeout) {
    var getMessages = function() {
        var deferred = $q.defer();
        $timeout(function() {
            deferred.resolve(['Hello', 'world']);
        }, 500);
        return deferred.promise;
    };
    return {
        getMessages: getMessages
    };
})

阅读全文 »

发表于 | 更新于： | 分类于 | 评论： | 阅读次数：

本文参考自：大前端

1
2
3
4
5
6
7
8
9
<style type="text/css">
    ul{background: #ff0;}
    li{float: left;}
</style>
    <ul>
        <li>小明</li>
        <li>小红</li>
        <li>小白</li>
    </ul>

1.传统的万能清除方法:

给末尾的li元素后面增加一个元素：<div class="clear"></div>
其样式为：

1
.clear{clear:both;height:0;overflow:hidden;}

2.常用的清除方法:

在父类元素上面加类：<ul class="clearfix"></ul>，后面的两个方法也是在父元素上加clearfix类
利用伪类,其样式为：

1
2
3
4
5
6
7
8
.clearfix:before,.clearfix:after{
    content: '';
    display: block;/*table也可以*/
}
.clearfix:after{
    overflow: hidden;
    clear: both;
}

3.最优浮动闭合方案：

1
2
3
4
5
6
7
8
.clearfix{*+height:1%;}
.clearfix:after{
    content:".";
    display:block;
    height:0;
    clear:both;
    visibility:hidden
}
阅读全文 »

发表于 | 更新于： | 分类于 | 评论： | 阅读次数：

1.安装上传照片需要的插件

1.先新建一个ionic项目

1
$ ionic start test tabs

2.安装插件

1
2
$ cordova plugin add cordova-plugin-image-picker
$ cordova plugin add cordova-plugin-camera

我们的yongche项目之前使用的camera插件是org.apache.cordova.camera,此处更新为cordova-plugin-camera,目前老版本的还可以使用

3.添加android环境

1
$ ionic platform add android

2.配置ng-cordova.js

1
2
3
//在index.html中cordova.js旁边引入ng-cordova.js
<script src="cordova.js"></script>
<script src="js/ng-cordova.js"></script>
1
2
//在app.js中注入ngCordova
angular.module('starter', ['ionic','ngCordova']).run(...)

3.代码实现

参考:https://cordova.apache.org/docs/en/latest/cordova-plugin-camera/index.html

阅读全文 »

发表于 | 更新于： | 分类于 | 评论： | 阅读次数：

参考：阮一峰的博客

“自适应网页设计”的核心是：利用media属性判断不同的屏幕分辨率，并根据不同的分辨率适配不同的css

首先，在网页代码的头部，加入一行viewport元标签:允许网页宽度自动调整。

  • 主流浏览器：

    1
    2
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <!-- 网页宽度默认等于屏幕宽度（width=device-width），原始缩放比例（initial-scale=1）为1.0，即网页初始大小占屏幕面积的100% -->

  • 老式浏览器（主要是IE6、7、8）：要用css3-mediaqueries.js

    1
    2
    3
    <!--[if lt IE 9]>
    　　<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
    <![endif]-->
阅读全文 »

发表于 | 更新于： | 分类于 | 评论： | 阅读次数：

先自定义用的变量

1
2
3
4
5
6
$scope.list=[
    {id:1,name:'小明'},
    {id:2,name:'小红'}
];
//select默认选中的值
$scope.default=$scope.list[0].id;

阅读全文 »

发表于 | 更新于： | 分类于 | 评论： | 阅读次数：

文字换行属性:white-space

该属性的常用的值(容器的宽度固定)：

  • normal: 默认，超出容器范围时换行
  • nowrap: 超出容器的范围也不换行

为什么要设置margin:0;padding:0;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
body{
    margin:0;
    padding:0;
}
ul{
    list-style-type:none;/*去除li前默认的小圆点*/
    margin:0;
    padding:0;
    overflow:hidden;/*防止li出现再ul外*/
}
*{
    margin:0;
    padding:0;
}

IE浏览器的内核Trident、 Mozilla的Gecko、google的WebKit、Opera内核Presto。不同的浏览器默认的margin和padding等属性都不相同，为了保证各浏览器的一致性，所以用下述办法：

  1. 直接用*{margin:0;padding:0;}(不推荐)
  2. 使用normalize.css，优于Reset CSS。

淘宝的css初始化：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin:0; padding:0; }
body, button, input, select, textarea { font:12px/1.5tahoma, arial, \5b8b\4f53; }
h1, h2, h3, h4, h5, h6{ font-size:100%; }
address, cite, dfn, em, var { font-style:normal; }
code, kbd, pre, samp { font-family:couriernew, courier, monospace; }
small{ font-size:12px; }
ul, ol { list-style:none; }
a { text-decoration:none; }
a:hover { text-decoration:underline; }
sup { vertical-align:text-top; }
sub{ vertical-align:text-bottom; }
legend { color:#000; }
fieldset, img { border:0; }
button, input, select, textarea { font-size:100%; }
table { border-collapse:collapse; border-spacing:0; }

阅读全文 »

发表于 | 更新于： | 分类于 | 评论： | 阅读次数：

$scope.$on(name,function):

在controller里放了这样的语句:

1
2
3
4
5
6
7
$scope.$on('$ionicView.enter', function() {
//do something
});

$scope.$on('$ionicView.beforeEnter', function() {
//do something
});

在刚进入controller的时候会先执行直接放在controller里的代码，然后再执行上面的
两个方法。所以，无法用上面的方法对进入controller前进行预处理。

视图生命周期:

事件名称作用
$ionicView.loaded视图已经被加载了。这事件只发生一次当视图被创建并添加到Dom中。当跳出页面并且被缓存了的话，再次访问这个页面时这个时间将不会被激活。Loaded事件是个好方式让你为这个视图设置你的代码； 然而，他并不是我们推荐的时间去监听视图被激活。
$ionicView.enter进入视图并被激活。这事件被激活来判断这个视图是第一个加载还是被缓存了的。
$ionicView.leave离开这个视图并且不是活动页面。调用这个事件判断应该被缓存还是摧毁。
$ionicView.beforeEnter视图即将被打开变成活动页面。
$ionicView.beforeLeave视图将被关闭并且不是活动页面。
$ionicView.afterEnter进入视图并是当前的活动页面
$ionicView.afterLeave已经离开视图，并成为非激活页面
$ionicView.unloaded视图的Controller已经被摧毁并且他的页面元素也从Dom中移除
阅读全文 »