发表于: 2017-07-04 22:53:10

1 746


今天完成的任务:

终于完成了分页自定义插件

复习完善angularjs的知识。


明天计划的事情:

解决分页指令中的bug

图片上传指令的封装。


遇到的问题:

点击分页的按钮,控制台报错RangeError: Maximum call stack size exceededat String.replace (<anonymous>),查询了一下是内存溢出,还没找出解决方法。


收获:

今天看了一个很好的angular学习笔记系列博客,连续看了十几篇,解决了之前不太清楚的地方:

1.ng-repeat迭代,默认有如下几个变量:

$index,迭代项的序号,从0开始

$first: 判断是否是迭代第一项, 如果是, 得到 true, 如果不是, 得到 false

$middle: 判断是否迭代中间项 (既不是第一项也不是最后一项的都是中间项), 如果是, 得到 true, 如果不是, 得到 false

$last: 判断是否是迭代最后项, 如果是, 得到 true, 如果不是, 得到 false


2.ng-class的使用方法:

ng-class="{err:ifErr,warn:ifWarn}" , err 和 warn 是待选的类名,":" 后面绑定数据, 数据布尔值为true时会添加相应的类名。

ng-class="{a:class1, b:class2}[abc]",当变量abc的值为a时,class为class1,当变量abc的值为b时,class为class2.


3.ng-src与ng-href

ng-src: 绑定了数据的路径表达式

ng-href: 绑定了数据的路径表达式

如下:

 <img ng-src="./images/cats/{{favorite}}"/>

  <a ng-href="./images/cats/{{favorite}}">查看</a>


4.表达式中能够进行的运算:

计算 (+,-,*,/%)

比较 (==,!=,<,>,>=,<=)

布尔逻辑 (&&,||,!)

数组和对象 ([],{})

调用方法, 传入参数 (fun(i))


不能够使用:

++,--,if,else,throw,for,while,...


5.数据监听$watch

$watch是所有控制器的$scope中内置的方法:

$scope.$watch(watchObj,watchCallback,ifDeep)

watchObj变化时,执行watchCallback。

参数的含义:

a.watchObj:

需要被检测的对象, 可以是以下任意一种:

1. 某个数据, 监测这个数据的值是否发生变化

2. 一条 angular 表达式, 监测表达式的结果是否发生变化

3. 函数 (), 监测函数的返回值是否发生变化


b.watchCallback :

接受一个函数或者表达式, 当 watchObj 发生变化是会被调用或执行.

如果是函数形式, 它会收到三个参数:

watchCallback (newValue,oldValue,scope)

newValue: watchObj 的新的值 

oldValue: watchObj 的旧的值

scope: 就是当前控制器的 $scope


c.ifDeep: 

一个布尔值

如果 watchObj 的类型是对象或者数组的时候, ifDeep 值设置为 true, 那么 angular 会检测被监控对象的每个属性是否发生了变化, 而不只是检测一个简单的值.



6.过滤器filter

myFilter.filter('titleCase',function(){
   var titlecase = function(title,num){
       ...
};
   return titlecase
});
<span>{{title_1 | titleCase: 1 }}</span

对于返回值titlecase,有两个参数title,num,分别对应span中的 titleCase和1.


7.base64,url

base64是一种编码格式,可以把任何文件变成base64格式的字符,可以减少http请求,base64的编码格式是明文的,不能用于数据加密。

对于图片,编码实例如下:

编译前:

<img title="百度 logo" src="modules/app/images/search_logo_big.gif?__inline"/>

编译后:

<img title="百度 logo" src="data:image/gif;base64,R0lGO...Rw4ca8IcEplksZc3kmtgsQQgAADs=">



返回列表 返回列表
评论

    分享到