当前位置 博文首页 > weixin_33701564的博客：AngularJS进阶学习
参考：http://***/class/54f3ba65e564e50cfccbad4b
1. AJAX：Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）可以与服务器交换数据并更新部分网页，而无需重新加载整个页面。
2. JQuery：浏览器里原生的JavaScript有点像汇编语言，不同的浏览器就像不同的CPU架构，汇编语言各有千秋，这让前端开发者很恼火。聪明人很快发现了这个痛点，于是，抹平浏览器差异的jQuery库出现了。
3. AngularJS：jQuery看成库的话，AngularJS则是一个框架，它以一种特殊的方式向jQuery表达了敬意：内置精简版的jQuery - jqLite。如果某种原因你不愿意使用jqLite，也可以在AngularJS之前引入jQuery库。 AngularJS自动地将jqLite升级成jQuery。
?
指令directive：类似ng-app，ez-clock这样的非标准HTML标签叫做指令（JavaScript文件）
模板：包含AngularJS标记的html文件被称为模板
编译：将指令解析成为浏览器可以理解的html元素和脚本的过程叫做编译
视图：通过编译器解析处理模板文件，生成的结果就是视图
一般过程：构造声明式界面模板，来提出需求，继而抽取并实现自定义指令。
在HTML模板中，我们用了两个内置指令：
在默认情况下，一个DOM子元素不会创建新的作用域，也就是说，这个子元素所对应的 scope对象，其实就是它的最近一级的祖先对象对应的scope对象。
有些指令会导致创建新的作用域，比如ng-controller。如果在一个DOM对象上创建了新 的作用域，那么这个scope对象的原型是其最近一级的组件对象的scope对象。
编译仅仅在启动引导时执行一次，这意味着我们的link函数只会被调用一次，所以需要监听数据变化来使得界面和数据一致。
$watch方法要求传入三个参数：
以上便建立了从 数据到界面的单向绑定。
挂接监听函数（示例中使用keyup事件）， 在监听函数中实现对sb变量的修改。
以上便建立了从 界面到数据的单向绑定。
angular.module("ezstuff",[])
.directive("ezNamecardEditor",function(){
return {
restrict : "E",
template : "<ul class='nceditor'></ul>",
replace : true,
link : function(scope,element,attrs){
//获得变量名称
var model = attrs.data;
//展开HTML模板，使用field属性标记对应字段
element.append("<li>name : <input type='text' field='name'></li>")
.append("<li>gender : <input type='text' field='gender'></li>")
.append("<li>age : <input type='text' field='age'></li>");
//监听DOM事件，变化时修改变量值
element.find("input").on("keyup",function(ev){
var field = ev.target.getAttribute("field");
scope[model][field] = ev.target.value;
//将对scope的修改进行传播
scope.$apply("");
});
}
};
})
.directive("ezLogger",function(){
return {
restrict : "A",
link : function(scope,element,attrs){
var model = attrs.data;
scope.$watch(model,function(nv){
var cnt = JSON.stringify(nv,null," ");
element.html("<pre>"+cnt+"</pre ");
},true);
}
};
});cs
