详解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 相关文章推荐
jQuery表格插件ParamQuery简单使用方法示例
Dec 05 Javascript
jquery如何扑捉回车键触发的事件
Apr 24 Javascript
javascript的函数作用域
Nov 12 Javascript
jquery 设置style:display的方法
Jan 29 Javascript
详解maxlength属性在textarea里奇怪的表现
Dec 27 Javascript
JQuery遍历元素的后代和同胞实现方法
Sep 18 Javascript
js获取json中key所对应的value值的简单方法
Jun 17 Javascript
VsCode插件整理(小结)
Sep 14 Javascript
详解vue mixins和extends的巧妙用法
Dec 20 Javascript
让axios发送表单请求形式的键值对post数据的实例
Aug 11 Javascript
vue-cli整合vuex的时候,修改actions和mutations,实现热部署的方法
Sep 19 Javascript
微信小程序中使用vant框架的具体步骤
Feb 18 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
使用Apache的rewrite技术
2006/06/22 PHP
php 批量替换程序的具体实现代码
2013/10/04 PHP
PHP对象递归引用造成内存泄漏分析
2014/08/28 PHP
PHP判断上传文件类型的解决办法
2015/10/20 PHP
PHP实现自动识别原编码并对字符串进行编码转换的方法
2016/07/13 PHP
PHP实现从上往下打印二叉树的方法
2018/01/18 PHP
关于PHP求解三数之和问题详析
2020/11/09 PHP
js写一个弹出层并锁屏效果实现代码
2012/12/07 Javascript
addEventListener 的用法示例介绍
2014/05/07 Javascript
jquery判断浏览器后退时候弹出消息的方法
2014/08/11 Javascript
30个经典的jQuery代码开发技巧
2014/12/15 Javascript
jQuery学习笔记之2个小技巧
2015/01/19 Javascript
jQuery实现为图片添加镜头放大效果的方法
2015/06/25 Javascript
JavaScript焦点事件、鼠标事件和滚轮事件使用详解
2016/01/15 Javascript
Js实现京东无延迟菜单效果实例(demo)
2017/06/02 Javascript
three.js实现炫酷的全景3D重力感应
2018/12/30 Javascript
15分钟深入了解JS继承分类、原理与用法
2019/01/19 Javascript
详解小程序云开发数据库
2019/05/20 Javascript
vue制作抓娃娃机的示例代码
2020/04/17 Javascript
[02:49]2018DOTA2亚洲邀请赛主赛事决赛日战况回顾 Mineski鏖战5局夺得辉耀
2018/04/10 DOTA
python如何实现远程控制电脑(结合微信)
2015/12/21 Python
Python实现一个服务器监听多个客户端请求
2018/04/12 Python
Python使用min、max函数查找二维数据矩阵中最小、最大值的方法
2018/05/15 Python
解决Python3中的中文字符编码的问题
2018/07/18 Python
tensorflow模型保存、加载之变量重命名实例
2020/01/21 Python
python中最小二乘法详细讲解
2021/02/19 Python
CSS去掉A标签(链接)虚线框的方法
2014/04/01 HTML / CSS
澳大利亚领先的宠物用品商店:VetSupply
2017/09/08 全球购物
美国高档帽子网上商店:Hats.com
2018/08/09 全球购物
俄罗斯汽车零件和配件在线商店:CarvilleShop
2019/11/29 全球购物
C语言基础笔试题
2013/04/27 面试题
优秀员工表扬信
2014/01/17 职场文书
美术国培研修感言
2014/02/12 职场文书
保护环境倡议书300字
2014/05/19 职场文书
颂军魂爱军营演讲稿
2014/09/13 职场文书
2015年社区卫生工作总结
2015/04/21 职场文书