AngularJS启动并生成视图时,会将根 ng-app 元素同 rootScope进行绑定。 r o o t S c o p e 进 行 绑 定 。 rootScope 是所有 scope对象的最上层 s c o p e 对 象 的 最 上 层 scope 对象在AngularJS中充当数据模型,但与传统的数据模型不一样, $scope 并不负责处理和操作数据,它只是视图和HTML之间的桥梁,它是视图和控制器之间的胶水。
通过使用指令和服务,我们可以将控制器重构成一个轻量且易于维护的形式。依赖注入的方式。作用域的继承类似js中的继承方式
$parse手动解析表达式 插值字符串
过滤器 内置 以及自定义
指令生成的自定义标签 replace设置为true便可移除,只显示模板的效果
.run 用于初始化全局的数据。仅对全局作用域有效即$rootscope
作用域对象内部设置值
通过属性的方式复制DOM中属性的值复制到指令的隔离作用域中来设置scope中属性的值,用@的方式指定映射的属性
这是隔离作用域
指令scope选项值的不同用法,以及@ = 区别
指令中的link选项?
内置指令
根据表达式的值得有无判断
ng-href ;作用域中的属性动态创建url
ng-src ;动态加载图片
ng-disabled ;有值表示禁用
ng-checked ;
ng-readonly ;只检查是否出现
ng-selected ;
ng-class ;
ng-style 。
会创建子作用域的指令
ng-include 加载、编译并包含外部HTML片段到当前的应用中 同源协议和跨域资源共享
ng-switch 类似js的switch 和on=”” ng-switch-default ng-switch-when 一起调用
ng-repeat 遍历并且每个元素有自己的模板和作用域,和独特的属性
first
f
i
r
s
t
last
middle
m
i
d
d
l
e
even
oddng−view路由管理ng−controllerng−if表达式的布尔值判断是否存在,且重新渲染生成元素添加时会是它们的原始状态ng−model应始终绑定
o
d
d
n
g
−
v
i
e
w
路
由
管
理
n
g
−
c
o
n
t
r
o
l
l
e
r
n
g
−
i
f
表
达
式
的
布
尔
值
判
断
是
否
存
在
,
且
重
新
渲
染
生
成
元
素
添
加
时
会
是
它
们
的
原
始
状
态
n
g
−
m
o
d
e
l
应
始
终
绑
定
scope上的一个数据模型内的属性,避免在作用域或后代发生属性覆盖
ng-change 表单输入变化调用表达式的值,和ng-mode一起用
ng-form 。。。
ng-click ng-select
ng-submit将表达式和onsubmit事件进行绑定,同事阻止默认行为,除非表单不含有action属性
angular.module('myApp', [])
.directive('myDirective', function() {
return {
restrict: String,
priority: Number,
terminal: Boolean,
template: String or Template Function:
function(tElement, tAttrs) (...},
templateUrl: String,
replace: Boolean or String,
scope: Boolean or Object,
transclude: Boolean,
controller: String or
function(scope, element, attrs, transclude, otherInjectables) { ... },
controllerAs: String,
require: String,
link: function(scope, iElement, iAttrs) { ... },
compile: // 返回一个对象或连接函数,如下所示:
function(tElement, tAttrs, transclude) {
return {
pre: function(scope, iElement, iAttrs, controller) { ... },
post: function(scope, iElement, iAttrs, controller) { ... }
}
// 或者
return function postLink(...) { ... }
}
};
});
scope参数 参考https://blog.csdn.net/VitaLemon__/article/details/52213103
设置为false表示和父作用域共用一个作用域
设置为true时,会从父作用域继承并创建一个新的作用域对象
隔离作用域 设置为空对象,无法访问外部作用域了,但是可以通信,使用@ = &
使用隔离作用域时,模板不能够访问父作用域的属性值,但是插槽中的属性貌似可以
= 双向数据绑定,ng-model,ng-bind类的指令 @绑定字符串值 &将引用传递给这个方法
transclude 与ng-transclude 的使用类似插槽 见https://segmentfault.com/a/1190000004586636
控制器参数可以是匿名或者是字符串,其构造函数参数可以是任意个,实现依赖注入
scope与指令元素相关联的当前作用域
s
c
o
p
e
与
指
令
元
素
相
关
联
的
当
前
作
用
域
element 当前指令对应的元素
attrs当前元素属性组成的对象
a
t
t
r
s
当
前
元
素
属
性
组
成
的
对
象
transclude 嵌入链接函数会与对应的嵌入作用域进行预绑定
angular中类似jqury的方法https://blog.csdn.net/jvid_sky/article/details/53286813
https://blog.csdn.net/qq_30100043/article/details/53428208
https://blog.csdn.net/SimonITer/article/details/52239951
require 选项参数使用 ? ^ ?^进行修饰,
scope与this的区别,this独立只能使用指定构造函数内的数据,
s
c
o
p
e
与
t
h
i
s
的
区
别
,
t
h
i
s
独
立
只
能
使
用
指
定
构
造
函
数
内
的
数
据
,
scope能继承父作用域的数据模型
https://blog.csdn.net/baidu_31333625/article/details/53611208
编译函数负责对模板DOM进行转换
链接函数负责将作用域和DOM进行链接。在作用域同DOM链接之前可以手动操作DOM
用 link 函数创建可以操作DOM的指令。
链接函数是可选的。如果定义了编译函数,它会返回链接函数,因此当两个函数都定义了时,
编译函数会重载链接函数。如果我们的指令很简单,并且不需要额外的设置,可以从工厂函数(回
调函数)返回一个函数来代替对象。如果这样做了,这个函数就是链接函数。