查看: 2518|回复: 0

[JavaScript/JQuery] 爱创课堂 北京前端培训 angular教程课堂笔记 下午复习 事件

发表于 2018-1-2 09:29:52
下午复习Angularjs

Ng-app  定义一个应用程序

Ng-init 初始化数据,属性值是一组变量赋值,变量之间用分号隔开

Ng-model 为表单元素做数据双向绑定的

插值 ng-bind

{{}} 我们可以将数据插入进来,

Ng-bind将数据绑定在元素的内容中,这种插值方式,在页面加载时候(angular还没有执行的时候)看不到插值符号

Angular.module 获取页面中应用程序拿到js中,做处理

第一个参数表示应用程序名称(ng-app)

第二个参数表示一个依赖集合,默认没有依赖集合要传递一个空数组

Ng-controller 通过控制器定义一个作用域,

第一个参数是一个字符串,表示控制器名称

第二个参数是函数,处理函数,在函数中我们可以为作用添加数据

参数默认是没有的,如果想用什么,可以通过参数注入方式将这些服务注入进来

作用域是一个空对象

参数注入 : 在函数中使用哪个模块就在参数中传入哪些模板

$scope  angular提供的一个作用域服务,通过这个作用域,我们可以为控制控制添加一些数据变量


事件
在vue中使用事件分成两步

在html中定义这个事件 v-on:click=”fn”

在vue中的methods属性中定义这些回调函数

在angular中每一个事件相当于一个指令,都是以ng-开头的

不同点

1 事件定义方式 (区别是回调函数的())例如 ng-click=“fn()” 定义了一个click事件

在angular默认要加上(),在vue中默认不要加()

2 回调函数的定义,在angular中事件回调函数定义在作用域中。

Vue定义在methods属性中

3 作用域 在angular中事件回调函数中的作用域就是控制器的作用域

Vue作用域是vue实例化对象

4 设置作用域中的数据 在angular中在事件回调函数内部设置作用域中的数据有两种方式

第一种是通过this设置,

第二种通过$scope设置

Vue只有一种方式,只能通过this

相同点

在angular中传入事件对象跟vue一样都是$event

1 <div class="main" ng-controller="myCtrl">
2 <button ng-click="choose('red')">{{colors[0]}}</button>
3 <button ng-click="choose(colors[1])">{{colors[1]}}</button>
4 <button ng-click="choose('blue')" ng-bind="colors[2]"></button>
5 <p>选中的颜色{{chooseColor}}</p>
6 </div>
7
8 app.controller('myCtrl', function ($scope) {
9 $scope.colors = ['red', 'orange', 'blue']
10 $scope.chooseColor = '';
11 // 定义事件回调函数
12 $scope.choose = function (e) {
13 // 第一种方式,通过this设置
14 // this.chooseColor = 'red'
15 // 第二种可以通过$scope设置
16 // $scope.chooseColor = 'red'
17
18 // 如果参数是一个事件对象,我们的做法
19 // this.chooseColor = e.target.innerHTML
20
21 // 如果参数是一个字符串
22 this.chooseColor = e;
23 }
24 })
本文章版权归爱创课堂所有,转载请注明出处。

更多详细内容请访问爱创课堂官网首页

http://www.icketang.com/




回复

使用道具 举报