当前位置：
深入理解Angularjs向指令传递数据双向绑定机制
深入理解Angularjs向指令传递数据双向绑定机制
这里有新鲜出炉的AngularJS开发指南，程序狗速度看过来！
AngularJS 前端JS框架AngularJS诞生于Google是一款优秀的前端JS框架，已经被用于Google的多款产品当中。AngularJS有着诸多特性，最为核心的是：MVC、模块化、自动化双向数据绑定、语义化标签、依赖注入，等等。
这篇文章主要深入的给大家介绍了Angularjs向指令传递数据，双向绑定机制的相关资料,需要的朋友可以参考下
下面来先看一个简单例子
&!DOCTYPE html&
&html lang="zh-CN" ng-app="app"&
&meta charset="utf-8"&
&title&&/title&
&link rel="stylesheet" href="../bootstrap.min.js"&
&label&硬编码的input&/label&
&input type="text" ng-model="Url"&
&div my-directive some-attr="Url"&&/div&
&script src="../angular.min.js"&&/script&
angular.module('app', [])
.directive('myDirective', function() {
restrict: 'A',
replace: true,
myUrl: '=someAttr', // 等号用做 双向绑定 这里不做详细介绍
template: '&div&'+
'&label&指令中的input&/label&'+
'&input type="text" ng-model="myUrl"&'+
'&a href="{{ myUrl }}"&点我试试&/a&'+
这个例子我用通俗的话来过一遍
1.使用隔离作用域 让DOM中的 ng-model="Url" ，这里暂且叫他'A' 与 指令中的 some-attr="Url" --& 'B' 形成双向绑定关系
myUrl: '=someAttr',
经过上面的步骤，B与 隔离作用域中的model myUrl 就指向了同一个地方
2.使隔离作用域中的model myUrl --&'B' 与指令模板中的 ng-model="myUrl" --&'C' 形成双向绑定关系
template: '&div&'+
'&label&指令中的input&/label&'+
'&input type="text" ng-model="myUrl"&'+
'&a href="{{ myUrl }}"&点我试试&/a&'+
这个时候 A B C 就同时指向了 一个地址 所有的事情也就顺理成章了
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流。
与本文相关文章在mvc/mvvm类框架出现之前，开发者通常需要手动更新html并维护html与数据之间的关系。随着mvc思想在前端社区的普及和发展，view层和model层的解耦和分离机制已经是各框架的标配了。令人欣喜的是，angular2在现有各框架的理论基础上对数据绑定重新进行了抽象，在架构上进行了革新，很有借鉴意义。从本文起我们就将开始讨论angular2中的数据绑定。angular2中有四种数据绑定：插入符（interpolation）、单向绑定（one-way binding）、事件绑定（event binding）和双向绑定（two-way binding）。今天我们先介绍前两种：插入符和单向绑定。说到数据绑定就不得不提到模板层和数据。在angular1中，以scope属性的形式存在的数据会通过watch机制来和模板进行绑定。具体操作中，既可以手动调用scope上的$watch方法，也可以在模板层中使用相关的绑定指令或大括号绑定语法。然而，direcitve和scope的关系却错综复杂：directive既可以复用父级的scope，也可以拥有自己的scope；当它拥有自己的scope时，这个scope既可以和父级scope没有继承关系，也可以通过prototype链来继承父级scope上的属性&&总之，这种盘根错节的数据关系使得angular1对于开发者并不那么友好。自然，简化数据关系和数据结构就成了Google在angular2开发中的重要任务之一。在angular2中，component和数据有了清晰的对应关系：模板层中绑定的数据就是当前组件的实例属性，scope的概念消失了。我们先通过一些简单的例子来帮助大家认识一下这种关系：@Component({
// selector告知angular在哪里初始化AppComponent这个组件
selector: 'hello-world',
// AppComponent组件的具体模板
template: `
&h1 class="{{color}}"&hello world, from {{name}}&/h1&
`})export class AppComponent {
public name: string = 'Ralph';};我们在AppComponent类中添加了string类型的name属性，并赋值为"Ralph"；相应地，为了使name属性能够在模板中被显示出来，我们在&h1&标签中增加了{{name}}，这就是angular2模板的插入符语法。插入符语法不仅能用到html标签的内容上，也可以用到属性上：import {Component} from /core';@Component({
styles: [`
background:
// selector告知angular在哪里初始化AppComponent这个组
selector: 'hello-world',
// AppComponent组件的具体模板
template: `
&h1 class="{{classNames}}"&hello world, from {{name}}&/h1&
`})export class AppComponent {
public name: string = 'Ralph';
public classNames: string = 'blue';};在上面的例子中，我们在Component装饰器上增加了styles属性，styles属性的值是一个字符串数组，编译后将作为当前组件的css；同时，我们还使用了es6中的反引号语法来包裹整块字符串，省去了拼接的麻烦。h1上的class属性和AppComponent上的classNames属性进行了绑定，classNames被赋值为了blue，正好适配了class中的.blue选择器。在进行属性绑定时，我们也可以使用单向绑定的语法：import {Component} from /core';@Component({
styles: [`
background:
// selector告知angular在哪里初始化AppComponent这个组
selector: 'hello-world',
// AppComponent组件的具体模板
template: `
&h1 [class]="classNames"&hello world, from {{name}}&/h1&
`})export class AppComponent {
public name: string = 'Ralph';
public classNames: string = 'blue';};请注意class两端的括号[]不能省略，否则只会在初始值时赋值，而不会对变化进行监听。单向绑定语法还有一种较少使用的形式，把中括号换为bind-前缀，功能和上例等价：import {Component} from /core';@Component({
styles: [`
background:
// selector告知angular在哪里初始化AppComponent这个组
selector: 'hello-world',
// AppComponent组件的具体模板
template: `
&h1 bind-class="classNames"&hello world, from {{name}}&/h1&
`})export class AppComponent {
public name: string = 'Ralph';
public classNames: string = 'blue';};除了引入组件属性并放弃scope外，angular2在框架思想上还有一个比较有价值的贡献：彻底区分dom node属性（property）和html标签属性（attribute）。由于中文表述上property和attribute都翻译为&属性&，国内的开发者对于这两个截然不同的概念可能相对缺少关注；然而在国外，如何区分property和attribute是最高频出现的前端基础面试题之一。既然大家都知道他们不同，那博主为什么还说这是angular2的贡献呢？angular2之前的框架，在遇到property和attribute相关的问题时，都只是&头痛医头，脚痛医脚&，只解决具体问题而没有抽象到框架层面上去。以react为例，在文档的forms章节中（https://facebook.github.io/react/docs/forms.html），认为input控件的value property和value attribute之间的不同步是传统html的一种缺失（absent when writing traditional form HTML）；而angular2的态度相对更宏观一些：property和attribute不是同一个概念，二者之间没有绝对的对应关系，它们可以同步，也可以不同步，一些property在attribute中找不到对应，也有一些attribute在property中找不到对应；但是要记住一点，angular2的绑定是针对dom node property的绑定，而非针对HTML标签attribute的绑定。在这样的设计之上，对于value、disabled、checked等属性的处理就很清晰了；更为重要的是，它也为指令间、组件间的数据传递打下了良好的基础。以checked属性的绑定为例：import {Component} from /core';@Component({
// selector告知angular在哪里初始化AppComponent这个组件
selector: 'hello-world',
// AppComponent组件的具体模板
template: `
&h1 class="{{color}}"&hello world&/h1&
checked属性绑定测试：&input type="checkbox" [checked]="checked" /&&br /&
&button (click)="onClick()"&click me&/button&
`})export class AppComponent {
public checked: boolean = false;
public onClick() {
this.checked = !this.
}};上面的例子中出现了对click事件的监听，暂时不是本节的重点，大家可以先忽略细节。input[type="checkbox"]上的checked属性和AppComponent上的checked属性进行了绑定。AppComponent上的checked属性初始值为false，用户每次点击按钮时，onClick方法被触发，checked的值会相对于上一个值取反，从而实现选中/反选多选框的效果。style和class是两个比较特殊的属性：style作为行内属性时，其值依然是键值对的组合；class经常需要对某一个值进行添加和删除，以完成toggle的操作。angular2对style和class的绑定有进一步的封装。对style进行绑定：import {Component} from /core';@Component({
// selector告知angular在哪里初始化AppComponent这个组件
selector: 'hello-world',
// AppComponent组件的具体模板
template: `
&h1 class="{{color}}"&hello world&/h1&
&button (click)="onClick()" [style.background]="color"&更改背景色&/button&
`})export class AppComponent {
public color: string = 'blue';
public onClick() {
this.color = this.color === 'blue' ? 'green' : 'blue';
}};对class进行绑定:import {Component} from /core';@Component({
styles: [`
.selected{
background:
// selector告知angular在哪里初始化AppComponent这个组件
selector: 'hello-world',
// AppComponent组件的具体模板
template: `
&h1 class="{{color}}"&hello world&/h1&
&button (click)="onClick()" [class.selected]="open"&更改背景色&/button&
`})export class AppComponent {
public open: boolean = false;
public onClick() {
this.open = !this.
}};需要对style和class进行操作时，除了使用数据绑定以外，也可以使用相应的指令，稍后的章节中会有所涉及。既然angular2的数据绑定通常是对dom node property的绑定，那么需要绑定一个不具有property对应项的attribute属性怎么操作呢？作为一个例外，angular2为此提供了attr.attribute-name的绑定方式，以绑定aria-label属性为例：import {Component} from /core';@Component({
// selector告知angular在哪里初始化AppComponent这个组件
selector: 'hello-world',
// AppComponent组件的具体模板
template: `
&h1 class="{{color}}"&hello world&/h1&
&button [attr.aria-label]="type"&help&/button&
`})export class AppComponent {
public type: string = 'help';};对angular2的插入符和单向绑定的介绍就先到这里，事件绑定、双向绑定将放到后续的章节中。
最新教程周点击榜
微信扫一扫angularJs&数据绑定原理及机制杂记
首先，数据绑定涉及到一些关键字：$watch,$apply,$digest,dirty-checking等等。。。。
$watch 队列。你在页面绑定一个model到页面，就会在$watch队列里面增加一条。
User: &&/span&input type="text" ng-model="user" /&
Password: &&/span&input type="password" ng-model="pass" /&
上面的两个绑定操作就在$watch队列里面增加了两条记录。这里要注意下ng-repeat 这个指令，他在队列里面增加的条数是跟数据关联，而不是一条。
ng-repeat="person in people"& {{person.name}} -
{{person.age}}
理解了队列，然后就是$digest 循环，一旦有操作触发$digest循环，它就会遍历$watch队列里面的变动，发现更改，在循环结束后会同步到页面（DOM）。
这里要说的是一旦有model变动，都会触发$digest循环遍历队列，直到所有的model都不在变化，为了防止无限循环的变动，这个循环遍历操作只被执行10次，10次之后会抛出异常，结束循环。这就操作成有些model的改变不能够同步到页面，也就是我们的数据为什么有的明明变了，但是页面没有同步。这里就需要我们手动的触发循环让它同步到DOM上。手动执行：$apply,$digest方法即可。
model绑定到输入框上，输入框的变化会造成apply函数的多次执行。
此处回顾下上面讲到的，每一个页面的绑定都会在队列里面生成一条，但是页面的方法不会加入到watch里面去，但是因为方法自己存在处理数据同步的机制，也就是方法本身封装了apply方法。
{{ name }}
&&/span&button ng-click="changeFoo()"&Change the name&/&/span&button&
app.controller('MainCtrl', function() {
$scope.name = "Foo";
$scope.changeFoo = function() {
$scope.name = "Bar";
这里说的函数，仅限于angular为我们封装的函数，我们自己写的jquery函数的执行是不会触发apply函数的执行，这样监视变量的watch并没有执行，所以不会变化，这里就需要手动的去apply。例子看下面的：
app.directive('clickable', function() {
restrict: "E",
template: '
link: function(scope, element, attrs) {
element.bind('click', function() {
scope.foo++;
scope.bar++;
app.controller('MainCtrl', function($scope) {
$scope.foo = 0;
$scope.bar = 0;
已投稿到：
以上网友发言只代表其个人观点，不代表新浪网的观点或立场。浏览器事件循环和Angular.js扩展
我们的浏览器一直在等待事件，比如用户交互。假如你点击一个按钮或者在输入框里输入东西，事件的回调函数就会在解释器里执行，然后你就可以做任何DOM操作，等回调函数执行完毕时，浏览器就会相应地对DOM做出变化。 Angular拓展了这个事件循环，生成一个有时成为angular context的执行环境（记住，这是个重要的概念），为了解释什么是context以及它如何工作，我们还需要解释更多的概念。
$watch 队列（$watch list）
每次你绑定一些东西到你的UI上时你就会往$watch队列里插入一条$watch。想象一下$watch就是那个可以检测它监视的model里时候有变化的东西。例如你有如下的代码
index.html
User: &input type="text" ng-model="user" /&
Password: &input type="password" ng-model="pass" /&
在这里我们有个$scope.user，他被绑定在了第一个输入框上，还有个$scope.pass，它被绑定在了第二个输入框上，然后我们在$watch list里面加入两个$watch
接着看下面的例子：
controllers.js
app.controller('MainCtrl', function($scope) {
$scope.foo = "Foo";
$scope.world = "World";
index.html
Hello, {{ World }}
这里，即便我们在$scope上添加了两个东西，但是只有一个绑定在了UI上，因此在这里只生成了一个$watch.&
再看下面的例子：
&controllers.js
app.controller('MainCtrl', function($scope) {
$scope.people = [...];
index.html
这里又生成了多少个$watch呢？每个person有两个（一个name，一个age），然后ng-repeat又有一个，因此10个person一共是(2 * 10) +1,也就是说有21个$watch。 因此，每一个绑定到了UI上的数据都会生成一个$watch。对，那这写$watch是什么时候生成的呢？ 当我们的模版加载完毕时，也就是在linking阶段（Angular分为compile阶段和linking阶段---译者注），Angular解释器会寻找每个directive，然后生成每个需要的$watch。听起来不错哈，但是，然后呢？
$digest循环
还记得我前面提到的扩展的事件循环吗？当浏览器接收到可以被angular context处理的事件时，$digest循环就会触发。这个循环是由两个更小的循环组合起来的。一个处理evalAsync队列，另一个处理$watch队列，这个也是本篇博文的主题。 这个是处理什么的呢？$digest将会遍历我们的$watch，然后询问：
嘿，$watch，你的值是什么？
好的，它改变过吗？
没有，先生。
（这个变量没变过，那下一个）
你呢，你的值是多少？
报告，是Foo。
刚才改变过没？
改变过，刚才是Bar。
（很好，我们有DOM需要更新了）
继续询问知道$watch队列都检查过。
这就是所谓的dirty-checking。既然所有的$watch都检查完了，那就要问了：有没有$watch更新过？如果有至少一个更新过，这个循环就会再次触发，直到所有的$watch都没有变化。这样就能够保证每个model都已经不会再变化。记住如果循环超过10次的话，它将会抛出一个异常，防止无限循环。 当$digest循环结束时，DOM相应地变化。
例如：&controllers.js
app.controller('MainCtrl', function() {
$scope.name = "Foo";
$scope.changeFoo = function() {
$scope.name = "Bar";
index.html
{{ name }}
&button ng-click="changeFoo()"&Change the name&/button&
这里我们有一个$watch因为ng-click不生成$watch（函数是不会变的）。
我们按下按钮
浏览器接收到一个事件，进入angular context（后面会解释为什么）。
$digest循环开始执行，查询每个$watch是否变化。
由于监视$scope.name的$watch报告了变化，它会强制再执行一次$digest循环。
新的$digest循环没有检测到变化。
浏览器拿回控制权，更新与$scope.name新值相应部分的DOM。
这里很重要的（也是许多人的很蛋疼的地方）是每一个进入angular context的事件都会执行一个$digest循环，也就是说每次我们输入一个字母循环都会检查整个页面的所有$watch。
通过$apply来进入angular context
谁决定什么事件进入angular context，而哪些又不进入呢？$apply！
如果当事件触发时，你调用$apply，它会进入angular context，如果没有调用就不会进入。现在你可能会问：刚才的例子里我也没有调用$apply啊，为什么？Angular为了做了！因此你点击带有ng-click的元素时，时间就会被封装到一个$apply调用。如果你有一个ng-model="foo"的输入框，然后你敲一个f，事件就会这样调用$apply("foo = 'f';")。
Angular什么时候不会自动为我们$apply呢？
这是Angular新手共同的痛处。为什么我的不会更新我绑定的东西呢？因为jQuery没有调用$apply，事件没有进入angular context，$digest循环永远没有执行。
我们来看一个有趣的例子：
假设我们有下面这个directive和controller
app.directive('clickable', function() {
restrict: "E",
template: '&ul style="&li&{{foo}}&/li&&li&{{bar}}&/li&&/ul&',
link: function(scope, element, attrs) {
element.bind('click', function() {
scope.foo++;
scope.bar++;
app.controller('MainCtrl', function($scope) {
$scope.foo = 0;
$scope.bar = 0;
它将foo和bar从controller里绑定到一个list里面，每次点击这个元素的时候，foo和bar都会自增1。
那我们点击元素的时候会发生什么呢？我们能看到更新吗？答案是否定的。因为点击事件是一个没有封装到$apply里面的常见的事件，这意味着我们会失去我们的计数吗？不会
真正的结果是：$scope确实改变了，但是没有强制$digest循环，监视foo&和bar的$watch没有执行。也就是说如果我们自己执行一次$apply那么这些$watch就会看见这些变化，然后根据需要更新DOM。
试试看吧：
如果我们点击这个directive（蓝色区域），我们看不到任何变化，但是我们点击按钮时，点击数就更新了。如刚才说的，在这个directive上点击时我们不会触发$digest循环，但是当按钮被点击时，ng-click会调用$apply，然后就会执行$digest循环，于是所有的$watch都会被检查，当然就包括我们的foo和bar的$watch了。
现在你在想那并不是你想要的，你想要的是点击蓝色区域的时候就更新点击数。很简单，执行一下$apply就可以了：
element.bind('click', function() {
scope.foo++;
scope.bar++;
scope.$apply();
$apply是我们的$scope（或者是direcvie里的link函数中的scope）的一个函数，调用它会强制一次$digest循环（除非当前正在执行循环，这种情况下会抛出一个异常，这是我们不需要在那里执行$apply的标志）。
有用啦！但是有一种更好的使用$apply的方法：
element.bind('click', function() {
scope.$apply(function() {
scope.foo++;
scope.bar++;
有什么不一样的？差别就是在第一个版本中，我们是在angular context的外面更新的数据，如果有发生错误，Angular永远不知道。很明显在这个像个小玩具的例子里面不会出什么大错，但是想象一下我们如果有个alert框显示错误给用户，然后我们有个第三方的库进行一个网络调用然后失败了，如果我们不把它封装进$apply里面，Angular永远不会知道失败了，alert框就永远不会弹出来了。
因此，如果你想使用一个jQuery插件，并且要执行$digest循环来更新你的DOM的话，要确保你调用了$apply。
有时候我想多说一句的是有些人在不得不调用$apply时会&感觉不妙&，因为他们会觉得他们做错了什么。其实不是这样的，Angular不是什么魔术师，他也不知道第三方库想要更新绑定的数据。
使用$watch来监视你自己的东西
你已经知道了我们设置的任何绑定都有一个它自己的$watch，当需要时更新DOM，但是我们如果要自定义自己的watches呢？简单
来看个例子：
app.controller('MainCtrl', function($scope) {
$scope.name = "Angular";
$scope.updated = -1;
$scope.$watch('name', function() {
$scope.updated++;
index.html
这就是我们创造一个新的$watch的方法。第一个参数是一个字符串或者函数，在这里是只是一个字符串，就是我们要监视的变量的名字，在这里，$scope.name(注意我们只需要用name)。第二个参数是当$watch说我监视的表达式发生变化后要执行的。我们要知道的第一件事就是当controller执行到这个$watch时，它会立即执行一次，因此我们设置updated为-1。
app.controller('MainCtrl', function($scope) {
$scope.name = "Angular";
$scope.updated = 0;
$scope.$watch('name', function(newValue, oldValue) {
if (newValue === oldValue) { return; } // AKA first run
$scope.updated++;
index.html
watch的第二个参数接受两个参数，新值和旧值。我们可以用他们来略过第一次的执行。通常你不需要略过第一次执行，但在这个例子里面你是需要的。灵活点嘛少年。
app.controller('MainCtrl', function($scope) {
$scope.user = { name: "Fox" };
$scope.updated = 0;
$scope.$watch('user', function(newValue, oldValue) {
if (newValue === oldValue) { return; }
$scope.updated++;
index.html
我们想要监视$scope.user对象里的任何变化，和以前一样这里只是用一个对象来代替前面的字符串。
呃？没用，为啥？因为$watch默认是比较两个对象所引用的是否相同，在例子1和2里面，每次更改$scope.name都会创建一个新的基本变量，因此$watch会执行，因为对这个变量的引用已经改变了。在上面的例子里，我们在监视$scope.user，当我们改变$scope.user.name时，对$scope.user的引用是不会改变的，我们只是每次创建了一个新的$scope.user.name，但是$scope.user永远是一样的。
app.controller('MainCtrl', function($scope) {
$scope.user = { name: "Fox" };
$scope.updated = 0;
$scope.$watch('user', function(newValue, oldValue) {
if (newValue === oldValue) { return; }
$scope.updated++;
index.html
现在有用了吧！因为我们对$watch加入了第三个参数，它是一个bool类型的参数，表示的是我们比较的是对象的值而不是引用。由于当我们更新$scope.user.name时$scope.user也会改变，所以能够正确触发。
阅读(...) 评论()讲解Angular的Bootstrap(引导)和Compiler(编译)机制
用圣才电子书APP或微信扫一扫，在手机上阅读本文，也可分享给你的朋友。
在上节简单介绍了Angular js框架，在这节将继续Angular的Bootstrap(引导)和Compiler(编译)机制。
一： Bootstrap：Angular的初始化
1：Angular推荐的自动化初始如下：
&!doctype html&&&
&html xmlns:ng=&http://angularjs.org& ng-app&&&
&script src=&angular.js&&&&
利用ngapp标示你需要自动引导应用程序的根节点，一般典型为html tag。在DOMContentLoaded事件触发 Angular会自动寻找ngapp作为应用的根节点，如果找到则会进行如下操作：
加载module(模块)相关directive(指令)。
创建应用程序injector(Angular的注入机制).
编译处理ng-app作为根节点的指令。这里允许你自定义选择DOM节 点作为应用根节点。
&!doctype html&&&
&html ng-app=&optionalModuleName&&&&
I can add: {{ 1+2 }}.&&
&script src=&angular.js&&&/script&&&
2：手动初始化：
如果想对对初始化有更多的控制权，可以采用自定义手动引导方法初始化代替 angular的自动初始化。比如你需要在angular编译模板之前做一些事情，比如改变模板某些内容。手动引导方式将会如下：
&!doctype html&&&
&html xmlns:ng=&http://angularjs.org&&&&
Hello {{'World'}}!&&
&script src=&http://code.angularjs.org/angular.js&&&/script&&&
&script&&&
angular.element(document).ready(function() {&&
angular.bootstrap(document);&&
&/script&&&
在页面所有代码加载完成后，找到html模板根节点(典型为document元素).
调用 api/angular.bootstrap（angular.bootstrap(element[, modules])）编译模板使其可执行.
二：Compiler：Angular的 编译
Angular的编译机制允许开发人员给浏览器添加新的Html语法，允许我们添加一些html节点，attribute，甚至创建 一些自定义的节点，attribute。Angular把这些行为的扩展成为指令directives.Angular带来了有用的directive，并允许我们 创建特定领域的directive。
&1: Compiler处理分为两个步骤：
转换DOM，收集directive，返回Link(连接 )function。
合并指令和Scope产生一个活生生的View。scop mode中的任何改变都会通过反应到view中，并来自view的用 户交互也会同步到scope model，并scope是一个单一数据源。
2:指令Directive
&Directive是一个会被特 殊的html设计编辑处理的行为。其可以被放置在节点的names, attributes, class 上，甚至是html注释中。下面是Angular自带 的ng-bind的等价写法：
&span ng-bind=&exp&&&/span&&&
&span class=&ng-bind:&&&/span&&&
&ng-bind&&/ng-bind&&&
&!-- directive: ng-bind exp &&
directive仅仅是一个在dom中会被Angular执行的一个function。下面是一 个拖拽的实例，其可以被应用于span，center的attribute上：
angular.module('drag', []).directive('draggable',
function ($document) {&&
&&& var startX = 0,&&
&&&&&&& startY = 0,&&
&&&&&&& x = 0,&&
&&&&&&& y = 0;&&
&&& return function (scope, element, attr) {&&
&&&&&&& element.css({&&
&&&&&&&&&&& position: 'relative',&&
&&&&&&&&&&& border: '1px solid red',&&
&&&&&&&&&&& backgroundColor: 'lightgrey',&&
&&&&&&&&&&& cursor: 'pointer'
&&&&&&& });&&
&&&&&&& element.bind('mousedown', function (event) {&&
&&&&&&&&&&& startX = event.screenX -&&
&&&&&&&&&&& startY = event.screenY -&&
&&&&&&&&&&& $document.bind('mousemove', mousemove);&&
&&&&&&&&&&& $document.bind('mouseup', mouseup);&&
&&&&&&& });&&
&&&&&&& function mousemove(event) {&&
&&&&&&&&&&& y = event.screenY - startY;&&
&&&&&&&&&&& x = event.screenX - startX;&&
&&&&&&&&&&& element.css({&&
&&&&&&&&& &&&&&&top: y + 'px',&&
&&&&&&&&&&&&&&& left: x + 'px'
&&&&&&&&&&& });&&
&&&&&&& }&&
&&&&&&& function mouseup() {&&
&&&&&&&&&&& $document.unbind('mousemove', mousemove);&&
&&&&&&&&&&& $document.unbind('mouseup', mouseup);&&
&&&&&&& }&&
3：view理解
有许多的模板引擎都被设计为模板(template)和数据(model)的合并返回一个字符串，再利用 innerHTML追加在DOM节点，这以为则数据的任何改变都必须重新合并生成新的内容追加在DOM上。形如下图属于单向绑定技术：
而 Angular则不同利用directive指令而非字符串，返回值是一个合并数据model的link function。view和model的绑定是自动，透 明的，不需要开发人员添加额外的action去更新view，Angular在这里不仅是数据model的绑定，还有行为概念。作为双向的绑定 ，形如下图：
Angular官网：http://angularjs.org/
代码下载：/angular/angular.js
&其他章节还在翻译中...希望大家多多指教，对于翻译我不会去按照原文完全翻译，会按照自己的理解。
来源：网络&&& 作者：不详
小编工资已与此赏挂钩！一赏一分钱！求打赏↓ ↓ ↓
如果你喜欢本文章，请赐赏：
已赐赏的人
我的电子书}