详解AngularJS控制器的使用


Posted in Javascript onMarch 09, 2016

控制器在Angularjs中的作用是增强视图,它实际就是一个函数,用来向视图中的作用域添加额外的功能,我们用它来给作用域对象设置初始状态,并添加自定义行为。

当我们在页面上创建一个控制器时,Angularjs会生成并传递一个$scope给这个控制器,由于Angularjs会自动实例化控制器,所以我们只需要写构造函数即可。下面的例子展示了控制器初始化:

function my Controller($scope){
 $scope.msg="hello,world!"; 
}

上面这个创建控制器的方法会污染全局命名空间,更合理的办法是创建一个模块,然后在模块中创建控制器,如下:

var myApp=angular.module("myApp",[]);
myApp.controller("myController",function($scope){
 $scope.msg="hello,world!";
})

用内置指令ng-click可以将按钮、链接等其他任何DOM元素同点击事件进行绑定。ng-click指令将浏览器中的mouseup事件,同设置在DOM元素上的事件处理程序绑定在一起(例如,当浏览器在某个DOM元素上触发了点击事件,函数就会被调用)。和前面的例子类似,绑定看起来是这样的:

<div ng-controller="FirstController">
<h4>The simplest adding machine ever</h4>
<button ng-click="add(1)" class="button">Add</button>
<a ng-click="subtract(1)" class="button alert">Subtract</a>
<h4>Current count: {{ counter }}</h4>
</div>

按钮和链接都被绑定在了内部$scope的一个操作上,当点击任何一个元素时AngularJS都会调用相应的方法。注意,当设置调用哪个函数时,会同时用括号传递一个参数(add(1))

app.controller('FirstController', function($scope) {
$scope.counter = 0;
$scope.add = function(amount) { $scope.counter += amount; };
$scope.subtract = function(amount) { $scope.counter -= amount; };
});

Angularjs与其他框架的最大区别在于,控制器并不适合来执行DOM操作、格式化或数据操作,以及除存储数据模型之外的状态维护操作,它只是视图和$scope之间的桥梁。

控制器嵌套(作用域包含作用域)

AngularJS应用的任何一个部分,无论它渲染在哪个上下文中,都有父级作用域存在。对于ng-app所处的层级来讲,它的父级作用域就是$rootScope。

默认情况下,AngularJS在当前作用域中无法找到某个属性时,便会在父级作用域中进行查找。如果AngularJS找不到对应的属性,会顺着父级作用域一直向上寻找,直到抵达$rootScope为止。如果在$rootScope中也找不到,程序会继续运行,但视图无法更新。

通过例子来看一下这个行为。创建一个ParentController,其中包含一个user对象,再创建一个ChildController来引用这个对象:

app.controller('ParentController', function($scope) {
$scope.person = {greeted: false};
});
app.controller('ChildController', function($scope) {
$scope.sayHello = function() {
$scope.person.name = 'Ari Lerner';
};
});

如果我们将ChildController置于ParentController内部,那ChildController的$scope对象的父级作用域就是ParentController的$scope对象。根据原型继承的机制,我们可以在子作用域中访问ParentController的$scope对象。

<div ng-controller="ParentController">
<div ng-controller="ChildController">
<a ng-click="sayHello()">Say hello</a>
</div>
{{ person }}
</div>

以上就是本文的全部内容,希望对大家的学习有所帮助,帮助大家熟悉AngularJS控制器。

Javascript 相关文章推荐
JavaScript对象、属性、事件手册集合方便查询
Jul 04 Javascript
实现高性能JavaScript之执行与加载
Jan 30 Javascript
微信小程序 loading(加载中提示框)实例
Oct 28 Javascript
jquery+ajax实现省市区三级联动 (封装和不封装两种方式)
May 15 jQuery
jQuery Ajax 实现分页 kkpager插件实例代码
Aug 10 jQuery
ES6解构赋值实例详解
Oct 31 Javascript
vue2.0使用swiper组件实现轮播的示例代码
Mar 03 Javascript
jQuery实现参数自定义的文字跑马灯效果
Aug 15 jQuery
全面解析vue router 基本使用(动态路由,嵌套路由)
Sep 02 Javascript
基于elementUI使用v-model实现经纬度输入的vue组件
May 12 Javascript
Vue使用NProgress进度条的方法
Sep 21 Javascript
vscode调试node.js的实现方法
Mar 22 Javascript
JQuery Mobile实现导航栏和页脚
Mar 09 #Javascript
javascript基本算法汇总
Mar 09 #Javascript
javascript时间排序算法实现活动秒杀倒计时效果
Jan 28 #Javascript
javascript获取wx.config内部字段解决微信分享
Mar 09 #Javascript
js仿支付宝填写支付密码效果实现多方框输入密码
Mar 09 #Javascript
jquery实现文本框textarea自适应高度
Mar 09 #Javascript
分享12个实用的jQuery代码片段
Mar 09 #Javascript
You might like
php获取CSS文件中图片地址并下载到本地的方法
2014/12/02 PHP
php通过asort()给关联数组按照值排序的方法
2015/03/18 PHP
php微信高级接口群发 多客服
2016/06/23 PHP
PHP中Socket连接及读写数据超时问题分析
2016/07/19 PHP
php 一维数组的循环遍历实现代码
2017/04/10 PHP
JQuery Dialog(JS 模态窗口,可拖拽的DIV)
2010/02/07 Javascript
JavaScript的类型转换(字符转数字 数字转字符)
2010/08/30 Javascript
javascript开发技术大全 第4章 直接量与字符集
2011/07/03 Javascript
BootStrap给table表格的每一行添加一个按钮事件
2017/09/07 Javascript
JavaScript编程设计模式之构造器模式实例分析
2017/10/25 Javascript
JS生成随机打乱数组的方法示例
2017/12/23 Javascript
javascript合并两个数组最简单的实现方法
2019/09/14 Javascript
通过javascript实现扫雷游戏代码实例
2020/02/09 Javascript
JavaScript React如何修改默认端口号方法详解
2020/07/28 Javascript
angular共享依赖的解决方案分享
2020/10/15 Javascript
[50:02]完美世界DOTA2联赛循环赛 Magma vs IO BO2第一场 11.01
2020/11/02 DOTA
python正常时间和unix时间戳相互转换的方法
2015/04/23 Python
浅谈Python数据类型判断及列表脚本操作
2016/11/04 Python
Python浅复制中对象生存周期实例分析
2018/04/02 Python
使用python 3实现发送邮件功能
2018/06/15 Python
CentOS 7 安装python3.7.1的方法及注意事项
2018/11/01 Python
python程序运行进程、使用时间、剩余时间显示功能的实现代码
2019/07/11 Python
python爬虫beautifulsoup库使用操作教程全解(python爬虫基础入门)
2021/02/19 Python
简单html5代码获取地理位置
2014/03/31 HTML / CSS
HTML5输入框下拉菜单功能的示例代码
2020/09/08 HTML / CSS
Harman Audio官方商店:购买JBL、Harman Kardon、Infinity和AKG
2019/12/05 全球购物
Why do we need Unit test
2013/01/03 面试题
24岁生日感言
2014/01/13 职场文书
求职简历的自我评价
2014/01/31 职场文书
少先队入队活动方案
2014/02/08 职场文书
销售主管竞聘书
2014/03/31 职场文书
我的中国梦演讲稿500字
2014/08/19 职场文书
2014年扶贫工作总结
2014/11/18 职场文书
网络营销计划
2015/01/17 职场文书
python 模拟在天空中放风筝的示例代码
2021/04/21 Python
JavaScript实现音乐播放器
2022/08/14 Javascript