Angular学习笔记(4)

在Angular为表单绑定change事件跟绑定click事件是一样的,都是通过ng-指令实现的

Ng-change事件使用方式跟ng-click,唯一不同点,是在ng-change中无法访问$event

Ng-change事件依赖于ng-model指令

Ng-submit是为form元素绑定的一个指令事件

当表单触发提交事件的时候,可以通过该指令捕获回调函数

该指令与ng-click指令使用方式是一样的,这个指令也能访问到事件对象

Run:应用程序启动起来的时候会调用该方法,这个方法会在根作用域上执行

这个方法是app对象上的方法

这个方法的作用域是全局作用域

默认参数是空

我们想在该方法中使用根作用域就要将根作用域注入进来(根作用域是$rootScope)

在run方法中只能访问根作用域

Angular的作用域是基于原型模式实现的

子作用域可以继承父作用域的变量以及属性(变量指定义在作用域$scope上的变量)

父作用域无法使用子作用域的变量以及属性

子作用域一旦定义与父作用域相同的变量就会覆盖父作用域中的变量,此时子作用域中不论如何改变都不会受父作用域中的变量值的影响

在子作用域中访问父作用域可以通过$parent属性访问

在某作用域中访问兄弟作用域

$$prevSibling访问前一个兄弟作用域

$$nextSibling访问后一个兄弟作用域

这几种情况是不建议使用的,因为会将作用域耦合在一起。

ng-href动态创建a的href属性

与href直接插值相比,具有优越性就是,可以提高用户体验

当没有数据的时候,作为普通元素展示

当有数据的时候作为a标签展示

这个指令比较特殊,插值的时候必须加上{{}}

ng-src动态创建img的src属性

它对于体验的提高是很有价值的

当没有数据的时候,不会创建src属性

当有数据的时候,会创建src属性

这个指令比较特殊,插值必须加上{{}}

类绑定ng-class

在Angular中绑定类大致三种情况

第一种是一个对象,

对象的属性值就是类的名称

对象属性值是一个布尔值,

true保留这个类

false删除这个类

第二种传递一个变量

变量的值就是类的名称

第三种传递一个数组

数组中每个成员表示一个类的名称

无论是变量还是数组中的成员,可以写字符串,(字符串要有‘’)

样式的绑定

绑定样式只有两种

第一种方式传递一个对象

对象的属性名称表示样式的属性名称

对象的属性值表示样式的属性值

第二种传递一个变量

这个变量是一个对象

对象的属性名称表示样式的名称

对象的属性值,表示样式的属性

Angular不能接受一个数组

ng-show,ng-hide来显隐一个元素,实现原理是通过类实现

ng-if来决定元素是否创建

true显示这个元素

false隐藏这个元素

Angular根据页面中注释位置来决定元素的创建位置

ng-switch可以控制多个页面的切换

on绑定一个控制变量

ng-switch-defautl设置默认页面

ng-switch-when当满足when条件适合,渲染该页面

注意,不论你设置多少ng-switch-when,或者ng-switch-defautl那么只能同时显示一个页面

循环渲染模板指令

ng-repeat参数使用方式

ng-repeat=“item in list”

$index循环的次数,从0开始计数的

$first是否是第一次,boolean

$last是否是最后一次boolean

$middle是否是中间的一次(除了首尾)boolean

$even偶数次

$odd基数次boolean

ng-include

动态加载模板

原理通过异步请求来实现的,所以要创建一个服务器

它的值是文件的路径,是个字符串或者变量

自定义指令

是Angular中很重要一部分

指令?

指令在Angular表示对dom元素功能的扩展

例如,div没有显隐功能,我们可以对他添加ng-show可以让他具有显影功能,

li元素没有循环动态创建的功能,我们可以添加一个ng-repeat指令,让这些li元素可以动态的创建

我们学习内置的指令就是学习Angular对dom元素拓展新功能,我们学习自定义指令就是要学会自己为dom元素拓展

自己需要的功能

在Angular中创建自定义指令需要directive方法,这个方法跟filter方法一样

filter是在应用程序app上调用的,directive方法也是在应用程序app上调用的,通过filter一样,

使用自定义指令分两步:

1.是在页面中添加dom,在页面中使用

2.在js中定义指令,通过directive方法

接收两个参数

第一个参数表示自定义指令的名称(在页面中使用-分隔单词,在自定义指令中通过驼峰式形式命名)

第二个参数表示自定义指令处理函数

返回值是一个对象,用来描述我们自定义指令的

描述自定义指令的对象有一些属性

Restrict表示自定义指令类型,四大类ECMA,这四类属性顺序是任意的,可以组合使用

E:元素自定义元素类型的自定义指令

语法<my-title></my-title>

C:class类自定义指令

语法<div class="my-title"></div>

M:注释指令(应用极少)

语法<!-- directive:mytitle-->

A:元素属性自定义指令

语法<div my-title></div> 

Template表示自定义指令模板,

replace:表示是否替换该元素(dom中的元素是否删除)

自定义指令作用域

每一个自定义指令都会有一个作用域,我们可以通过scope属性来约束这个作用域

可以通过controller定义控制器,来创建一个作用域

Controller它的值是一个函数,这个函数有三个常用的参数

$scope作用域服务,我们通过这个服务,可以创建一些数据

$element获取页面中的元素

如果没有Jquery类库,获取的是一个jqlite对象

如果有jQuery类库,获取的是一个jQuery实例化对象

但是这两对象方法是一样的,使用方式也是一样的

$attrs将自定义元素上的一些属性,创建一个对象

每一个属性值代表一个自定义元素上的属性,注意(属性名称是驼峰式命名)

$attr:它的值也是一个对象

对象的属性名称表示$attrs对象上的属性名称

对象 属性值表示指令元素上真实的属性名称

Scope,自定义指令,默认会使用父作用域中的数据(并且是一致的)

默认在没有定义作用域scope时候,会使用父作用域(父控制器的作用域)

我们可以通过scope属性来约束这个作用域

Scope值有三种

值是true,此时自定义指令的作用域是一个独立的,不会受到作用域中的影响,当然也不会影响到父作用域

值是False(默认值),此时自定义指令的作用域与父作用域是同一个作用域,因此在自定义指令作用域中修改数据会影响到父作用域,同样在父作用域中修改数据也会影响到自定义指令的作用域

值是{}(对象),此时自定义指令会创建一个独立的作用域,但是在自定义指令模板中是使用不了的,使用的时候还是父作用域中的数据

模板作用域

Scope有三种情况

值为false(默认情况,未定义scope的时候),自定义指令作用域与父作用域是同一个作用域,他们的变量行为是一致的。

值是true,自定义作用域是独立的,因此父作用域中修改数据不会影响到子作用域,子作用域修改变量也不会影响到父作用域

值是一个{},跟值为true效果是一样的,自定义指令用其自身数据渲染页面

这三种情况在Angular中叫隔离作用域

当值是一个对象时候,想使用父作用域中的数据可以通过作用域修饰符实现

在Angular中,使用父作用域中的数据,可以通过属性传递的方式来实现

@修饰符

实现父作用域向子作用域中传递数据的方式一种

第一步 在自定义元素上创建属性(这个属性是一个普通的自定义属性,其值就是一个字符串,因此想将父作用域的变量传递进来,就要使用差值语法)

第二步 在Scope属性中通过@符号将属性值与作用域中的变量绑定起来

特点

1.此时在自定义指令作用域中,是无法修改父作用域中数据的,数据传递是单向的

2.该数据绑定方式,会将自定义作用域中相应变量覆盖

Filter是在应用程序上调用的,directive方法也是在应用程序上调用的,通过filter一样,使用自定义指令分为两步

1.是在页面中添加到dom,在页面中使用

2.在js中定义指令,通过directive方法

接受两个参数

第一个参数表示自定义指令的名称(在页面中使用-分隔单词,在自定义指令中通过驼峰式命名)

第二个参数表示自定义指令处理函数

参数是空

作用域是window

整个生命中周期中,只执行了一次

返回值是一个对象,用来描述我们自定义指令的

猜你喜欢

转载自blog.csdn.net/qq_31404603/article/details/53169084