scope:
- scope.$parent指向scope的父作用域;
- scope.$$childHead指向scope的第一个子作用域;
- scope.$$childTail指向scope的最后一个子作用域;
- scope.$$nextSibling指向scope的下一个相邻作用域;
- scope.$$prevSibling指向scope的上一个相邻作用域;
directives scope:
- 默认 (
scope: false
) - directive使用原有作用域,所以也不存在原型继承,这种方式很简单,但也很容易出问题——除非该directive与html不存在数据绑定,否则一般情况建议使用第2条方式。 -
scope: true
- directive创建一个子作用域, 并且会从父作用域进行原型继承。 如果同一个DOM element存在多个directives要求创建子作用域,那么只有一个子作用域被创建,directives共用该子作用域。 -
scope: { ... }
- directive创建一个独立的“Isolate”作用域,没有原型继承。这是创建可复用directive组件的最佳选择。因为它不会直接访问/修改父作用域的属性,不会产生意外的副作用。这种directive与父作用域进行数据通信有如下四种方式(更详细的内容请参考Developer Guide):- = or =attr “Isolate”作用域的属性与父作用域的属性进行双向绑定,任何一方的修改均影响到对方,这是最常用的方式;
- @ or @attr “Isolate”作用域的属性与父作用域的属性进行单向绑定,即“Isolate”作用域只能读取父作用域的值,并且该值永远的String类型;
- & or &attr “Isolate”作用域把父作用域的属性包装成一个函数,从而以函数的方式读写父作用域的属性,包装方法是$parse,详情请见API-$parse;
link 和 controller区别:
聪明的读者可能想知道link
和 controller
之间的区别, 最基本的区别就是 控制器
可以导出一个API, 而子指令的link
函数可以通过require
来与这个API交互。
最佳实践: 当你想暴露一个API给其它的指令调用那就用
controller
,否则用link
。哪些指令支持动画呢?
部分AngularJS指令支持在它的生命周期内发生重要事件时触发动画钩子,下面的表格详细说明了哪些动画事件会被触发。
ngRepeat |
enter , leave , move |
ngView | enter , leave |
ngInclude |
enter , leave |
ngSwitch |
enter , leave |
ngIf |
enter , leave |
ngClass or {{class}} |
add , remove |
ngShow & ngHide |
add , remove (the ng-hide class value) |
对于各个动画事件的详细触发步骤,请参考API 文档。
编译器compile 和 link区别
编译器是 Angular 提供的一项服务,用来遍历DOM节点,查找特定的属性。编译过程分为两个阶段:
-
编译:遍历DOM节点,收集所有的指令,返回一个连接函数(link func)
-
连接:将上一步收集到的每个指令与其所在的作用域(scope)连接生成一个实时视图。任何作用域中的模型改变都会实时在视图中反映出来,同时任何用户与视图的交互则会映射到作用域的模型中。这样,作用域中的数据模型就成了唯一的数据源。
一些如
这样的指令,会为集合中的每个项目克隆一次DOM元素。由于克隆的模板只需要被编译一次,然后为每个克隆实例做一次连接,这样将编译分成编译和连接两个阶段就有效地提升了性能(译注:不用为每个克隆的实例都编译一次,只需对模板进行统一的一次编译,然后在连接阶段单独为每个实例进行到 scope 的连接即可)。ng-repeat
解析define js
sed -n '/define/p' starter.js 513 sed -n '/ define/p' starter.js 514 sed -n '/ define\(.*\),/$1/p' starter.js 515 sed -n '/ define\(.*\),/\1/p' starter.js 516 sed -n '/ define\.*,/\(1\)/p' starter.js 517 sed -n '/ define\*,/\(1\)/p' starter.js 518 sed -n '/ define\*,/\($1\)/p' starter.js 519 sed -n '/ define\(.*\),/\1/p' starter.js 520 sed -n '/ define(.*),/\1/p' starter.js 521 sed -n '/ define(.*),/$1/p' starter.js 522 sed '/ define(.*),/$1/p' starter.js 523 sed 's/ define(.*),/$1/p' starter.js 524 sed 's/ define(.*),/$1/' starter.js 525 sed 's/ define(.*),/\1/' starter.js 526 sed 's/.* define(.*),.*/\1/' starter.js 527 sed 's/.* define(.*),.*/$1/' starter.js 528 sed -n '/ define(.*),/$1/p' starter.js 529 sed 's/.* define(.*),.*/$1/' starter.js 530 sed -n 's/.* define(.*),.*/$1/' starter.js 531 sed -n 's/.* define(.*),.*/$1/p' starter.js 532 sed -n 's/.* define(.*),.*/\1/p' starter.js 533 sed -n '/.* define(.*),.*/\1/p' starter.js 534 sed -n '/ define/p' starter.js 535 sed -n '/ define/p' starter.js > temp.js 536 ls 537 vi temp.js 538 ls 539 grep -n '/\//p' temp.js 540 grep -n '/.*\/.*/p' temp.js 541 grep -n '/.*\/.*/p' temp.js > t2.js 542 sed -n '/.*\/.*/p' temp.js > t2.js 543 sed -n '/define.*\/.*/p' t2.js > t3.js 544 sed -n '/define.*\/.*,/$1/' t2.js > t3.js 545 sed -n '/define.*\/.*,/\1/' t3.js 546 sed -n '/define.*\/.*,/\\1/' t3.js 547 sed -n '/define.*\/.*,/$1/' t3.js 548 sed -n 's/define.*\/.*,/$1/' t3.js 549 sed -n 's/define.*\/.*,/$1/p' t3.js 550 sed 's/define.*\/.*,/$1/' t3.js 551 sed 's/define.*\/.*,/、1/' t3.js 552 sed 's/define.*\/.*,/\1/' t3.js 553 sed 's/define(.*\/.*),/\1/' t3.js 554 sed 's/define\(.*\/.*\),/\1/' t3.js 555 sed 's/.*define\(.*\/.*\),.*/\1/' t3.js 556 sed 's/.*define\(.*\/.*\),.*/\1/p' t3.js 557 sed 's/.*define\(.*\/.*\),.*/asdf/' t3.js 558 sed 's/.*define(.*\/.*),.*/\1/' t3.js 559 sed 's/.*define\(.*\/.*\),.*/\1/p' t3.js 560 sed 's/.*define\(.*\/.*\).*/\1/p' t3.js 561 sed 's/.*\(.*\/.*\).*/\1/p' t3.js 562 sed 's/.*define.*\/.*.*/\1/p' t3.js 563 sed 's/.*define.*\/.*.*/kjh/p' t3.js 564 sed 's/.*define.*\/.*.*/kjh/' t3.js 565 sed 's/.*define\(.*\/.*\).*/\1/' t3.js 566 sed 's/.*define\(.*\/.*\),/\1/' t3.js 567 sed 's/.*define\(.*\/.*\).*/\1/' t3.js 568 cat t3.js 569 sed -n '/define.*\/.*/p' t2.js > t3.js 570 sed 's/.*define\(.*\/.*\).*/\1/' t3.js 571 sed 's/.*define\(.*\/.*\),.*/\1/' t3.js 572 sed 's/.*define\(.*\/.*\),/\1/' t3.js 573 sed 's/.*define("\(.*\/.*\)",/\1/' t3.js 574 sed 's/.*define("\(.*\/.*\)",.*/\1/' t3.js 575 sed 's/.*define("\(.*\/.*\)", [.*/\1/' t3.js 576 sed 's/.*define("\(.*\/.*\)", \[.*/\1/' t3.js 577 sed 's/.*define("\(.*\/.*\)",\[.*/\1/' t3.js 578 sed 's/.*define("\(.*\/.*\)[", \[].*/\1/' t3.js 579 sed 's/.*define("\(.*\/.*\)[", \[]*.*/\1/' t3.js 580* sed 's/.*define("\([a-zA-Z\/].*\).*/\1/' t3.js 581 sed 's/.*define("\(.*\/.*\)[", \[]*.*/\1/' t3.js 582 sed 's/.*define("\(.*\/.*\)", [.*/\1/' t3.js 583 sed 's/.*define("\(.*\/.*\)", \[.*/\1/' t3.js 584 sed 's/.*define("\(.*\/.*\)", \[.*/\1/' t3.js > t4 585 sed 's/.*define("\(.*\/.*\)", \[.*/\1/' t4 586 sed 's/.*define("\(.*\/.*\)", .*/\1/' t4 587 sed 's/.*define("\(.*\/.*\)",.*/\1/' t4 588 sed 's/.*define("\(.*\/.*\)",.*/\1/' t4 > t5.js 589 ls 590 cd .. 591 ls 592 cd src 593 ls 594 cd lib 595 ls 596 sed ../../bin/t5.js 597 sed 's/lib/p' ../../bin/t5.js 598 sed -n '/lib//p' ../../bin/t5.js 599 sed -n '/lib/wget \1/p' ../../bin/t5.js 600 sed -n '/\(.*lib.*\)/wget \1/p' ../../bin/t5.js 601 sed 's/\(.*lib.*\)/wget \1/p' ../../bin/t5.js 602 sed 's/\(.*lib.*\)/wget \1/' ../../bin/t5.js 603 sed -n 's/\(.*lib.*\)/wget \1/p' ../../bin/t5.js 604 sed -n 's/\(.*lib.*\)/wget \1/p' ../../bin/t5.js 605 sed -n 's/\(.*lib.*\)/\1.js/p' ../../bin/t5.js 606 sed -n 's/\(.*lib.*\)/\1.js/p' ../../bin/t5.js > downloadlib.shell 607 chmod +x downloadlib.shell 608 ./downloadlib.shell 609 ls 610 sed -n 's/\(.*lib.*\)/\1.js"></script>/p' ../../bin/t5.js 611 sed -n 's/\(.*lib.*\)/\1.js"><\/script>/p' ../../bin/t5.js 612 sed -n 's/\(.*lib.*\)/\1.js"><\/script>/p' ../../bin/t5.js > appendJs.txt 613 sed -n 's/\(.*app.*\)/\1.js"><\/script>/p' ../../bin/t5.js > appendJs.txt 614 ls 615 cd .. 616 ls 617 cd app 618 ls 619 sed -n 's/\(.*app.*\)/\1.js/p' ../../bin/t5.js > downloadlib.shell 620 cat downloadlib.shell 621 cat ../lib/downloadlib.shell 622 sed -n 's/\(.*app.*\)/\1.js/p' ../../bin/t5.js > downloadlib.shell 623 sed -n 's/\(.*app\/[a-Z]\)/\1.js/p' ../../bin/t5.js > downloadlib.shell 624 sed -n 's/\(.*app\/[a-Z]*\)/\1.js/p' ../../bin/t5.js > downloadlib.shell 625 sed -n 's/\(.*app\/\d*\)/\1.js/p' ../../bin/t5.js > downloadlib.shell 626 cat downloadlib.shell 627 sed -n 's/\(.*app\/[a-z]*\)/\1.js/p' ../../bin/t5.js > downloadlib.shell 628 cat doe 629 cat downloadlib.shell 630 sed -n 's/\(.*app\/[a-Z]*\)/\1.js/p' ../../bin/t5.js > downloadlib.shell 631 sed -n 's/\(.*app\/[a-z|A-Z]*\)/\1.js/p' ../../bin/t5.js > downloadlib.shell 632 cat downloadlib.shell 633 sed -n 's/\(.*app\/[a-z|A-Z]*\)$/\1.js/p' ../../bin/t5.js > downloadlib.shell 634 cat downloadlib.shell 635 sed -n 's/\(.*app\/[a-z|A-Z|\.|_]*\)$/\1.js/p' ../../bin/t5.js > downloadlib.shell 636 cat downloadlib.shell
相关推荐
AngularJS学习笔记
JS AngularJS 学习笔记 YouTube视频截图
angularjs学习总结,实例介绍,适合初步阶段使用
AngularJS学习笔记.pdf
AngularJs学习笔记 中文版 适合初学者,比起读英文资料省力
AngularJS 学习笔记(表单验证篇)的详细代码,内置了angular的1.2.25版所以比较大,eclipse工程,但是可以直接用浏览器打开查看效果的。
angularjs学习笔记本,请参加http://blog.csdn.net/e891377/article/details/50519971
AngularJS 学习笔记 关于Directive的用法
学习angular时候从网上博客转为PDF,方便阅读,适合初学者。
(2)新版本然而,因为在angularJs1.3版本中,为了让根节点不再被挂载很多亢余的内容,所以禁止直接在根节点上注册controller (3)setInt
angular.js付费学习网站,按章节进行截屏
使用AngularJS制作与用户交互的动态清单列表: 1.使复选框状态与布尔值同步(双向模型绑定) 2.动态显示待办的事项个数 3.根据待办事项数显示不同颜色标签效果 4.响应用户输入
通过Ajax获取JSON数据以我之前写的与用户交互的动态清单列表为例,现在把模型中的数据单独写成一个JSON文件,再通过发起Ajax请求的方式获取JSON数据。这样,清单列表中的数据项就都是通过JSON数据来获取的了。
1. 关于AngularJS 2. 关于本文档 3. 开始的例子 4. 依赖注入 5. 作用域 6. 数据绑定与模板 7. 模板 8. 模板中的过滤器 9. 锚
AngularJS学习笔记,博客园收集整理