$parse , $interpolate ,$complie , $destroy
$parse 是angular 提供的javascript解析器 .
var getter = $parse(expression);
var setter = getter.assign;
controller("ctrl", ["$scope", "$parse", "$compile", "$interpolate", function ($scope, $parse, $compile, $interpolate) {
//read
$scope.name = "hello";
var expression = "name + ' ' +((5+6) == (12-1))";
var getter = $parse(expression);
var value = getter($scope); //hello true
//write
expression = "name";
var setter = getter.assign;
setter($scope, "1782");
$scope.name; //1782
}]);
有点像javascript eval 和 with 的结合。内部是通过复杂的正则实现的。
$parse 无法解析angular 的 {{}} 符合。
所以当我们需要解析如 {{name}} 时, 我们会用 $interpolate
$scope.name = "hello";
var expression = "{{name}}";
var value = $interpolate(expression)($scope); //没有setter的方法哦
console.log(value);
$compile 是用来处理html 节点的 . 要注意的是 $compile('str')($scope) = node; 这个node要在digest之后才会有scope value, ng-repeat同理,没有digest连一行都看不见,只有comment记号。
$scope.name = "hello"
var link = $compile("<div>{{name}}</div>");
var node = link($scope);
console.log(node[0].innerHTML); //{{name}} <--还没同步值
setTimeout(function () {
console.log(node[0].innerHTML); //hello <--同步咯
}, 0); //推迟到$digest之后
$compile 要注意的事 :
var elemA = $compile(directiveA)(scopeA);
1.elemA 的 scope 一定是scopeA , 即使directiveA使用了隔离scope.(elemA的child才是隔离的scope)
2.如果 directiveA 内有require, 那是不对的,会报错, 指令有require 那么它必须和它的依赖指令一起compile
3.$compile 不依赖elem的格局, 它只在乎scope, 所以elemA 你可以append到任意的地方,scope改变view依然会改变
4.scope 属于模板,所以你compile的这个scope应该是只属于这个模板的,当模板被remove,你的scope理应一同被remove.
5.template 不能被 compile 超过一次,同理 scope 也是一样 (不要想着一个scope compile 多个模板 , 记得 scope 属于模板而不是控制器 !)
6.remove 或 html('') 删除模板时, 记得调用 $elem.scope().$destroy(); scope一样删除.
7. 一般上只有在做动态模板的时候我们才会自己调用 $compile, 大部分情况下我们还是简单实用指令,模板,控制器就好 ^^
其实在angualr中最好是用 $timeout(fn,time,need_digest). 第3个参数让我们觉得之后要不要digest多一次.
随机推荐
- iOS 操作系统架构
Mac OS 和 iOS 操作系统架构 做iOS开发已经半年多了,但是感觉对iOS开发的理解却还只停留在表面,昨天刚把两个项目结了,今天打算学了一下iOS系统的架构,以便于更好的理解和开发. 首先看一 ...
- COJ 1010 WZJ的数据结构(十) 线段树区间操作
传送门:http://oj.cnuschool.org.cn/oj/home/problem.htm?problemID=1001 WZJ的数据结构(十) 难度级别:D: 运行时间限制:3000ms: ...
- jQuery/CSS3实现图片层叠展开特效
这是一款基于jQuery和CSS3的图片层叠展开特效,让鼠标滑过图片时即可触发这些特效.其中有一款就像扇子展开收拢一样,看起来效果都非常不错.当然本文主要还是来分析一下用jQuery实现这一效果的方法 ...
- Android动画效果
layout_left_in.xml <?xml version="1.0" encoding="utf-8"?> <layoutAnimat ...
- iOS语音识别,语音播报,文字变语音播报,语音变文字
首先使用的是科大讯飞的sdk 1.语音识别部分 AppDelegate.m #import "AppDelegate.h" #import <iflyMSC/iflyMSC. ...
- Android设置上下边框或者左右边框
<?xml version="1.0" encoding="utf-8"?> <com.sunskyjun.fwproject.widgts. ...
- Java 泛型数组
Java 不支持泛型数组.也就是说, List<String>[] ls = new ArrayList<String>[10]; 是不支持的,而 List<String ...
- Redis起步
Rdis和JQuery一样是纯粹为应用而产生的,这里记录的是在CentOS 5.7上学习入门文章: 1.Redis简介 Redis是一个key-value存储系统.和Memcached类似,但是解决 ...
- android ViewFlipper的使用
有个android.widget.ViewAnimator类继承至FrameLayout,ViewAnimator类的作用是为FrameLayout里面的View切换提供动画效果.该类有如下几个和动画 ...
- [serverlet][转载: 深入理解HTTP Session]
[serverlet][转载: 深入理解HTTP Session] 标签(空格分隔): 未分类 原创作品,允许转载,转载时请务必以超链接形式标明文章 原始出处 .作者信息和本声明.否则将追究法律责任. ...