详解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 相关文章推荐
DOM精简教程
Oct 03 Javascript
js类 from qq
Nov 13 Javascript
jquery下div 的resize事件示例代码
Mar 09 Javascript
JQuery中的事件及动画用法实例
Jan 26 Javascript
Javascript简写条件语句(推荐)
Jun 12 Javascript
用JS实现轮播图效果(二)
Jun 26 Javascript
微信小程序 picker 组件详解及简单实例
Jan 10 Javascript
bootstrapValidator bootstrap-select验证不可用的解决办法
Jan 11 Javascript
JavaScrip关于创建常量的知识点
Dec 07 Javascript
详解如何理解vue的key属性
Apr 14 Javascript
el-select 下拉框多选实现全选的实现
Aug 02 Javascript
JS实现音乐钢琴特效
Jan 06 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 编程请选择正确的文本编辑软件
2006/12/21 PHP
JavaScript 无符号右移运算符
2009/04/17 Javascript
javaScript 简单验证代码(用户名,密码,邮箱)
2009/09/28 Javascript
Java 正则表达式学习总结和一些小例子
2012/09/13 Javascript
js异常捕获方法介绍
2013/04/10 Javascript
js获取光标位置和设置文本框光标位置示例代码
2014/01/09 Javascript
JS实现先显示大图后自动收起显示小图的广告代码
2015/09/04 Javascript
JQuery组件基于Bootstrap的DropDownList(完整版)
2016/07/05 Javascript
完美JQuery图片切换效果的简单实现
2016/07/21 Javascript
async/await与promise(nodejs中的异步操作问题)
2017/03/03 NodeJs
vue slot 在子组件中显示父组件传递的模板
2018/03/02 Javascript
layui type2 通过url给iframe子页面传值的例子
2019/09/06 Javascript
python获取android设备的GPS信息脚本分享
2015/03/06 Python
Python基于sftp及rsa密匙实现远程拷贝文件的方法
2016/09/21 Python
深入理解Python对Json的解析
2017/02/14 Python
Python实现在线暴力破解邮箱账号密码功能示例【测试可用】
2017/09/06 Python
同时安装Python2 &amp; Python3 cmd下版本自由选择的方法
2017/12/09 Python
Python返回数组/List长度的实例
2018/06/23 Python
python 将print输出的内容保存到txt文件中
2018/07/17 Python
Python 实现两个服务器之间文件的上传方法
2019/02/13 Python
wxPython绘图模块wxPyPlot实现数据可视化
2019/11/19 Python
利用python进行文件操作
2020/12/04 Python
Pytorch实现WGAN用于动漫头像生成
2021/03/04 Python
利用CSS3的border-radius绘制太极及爱心图案示例
2016/05/17 HTML / CSS
HTML5之多线程(Web Worker)
2019/01/02 HTML / CSS
卡塔尔航空官方网站:Qatar Airways
2017/02/08 全球购物
Can a struct inherit from another class? (结构体能继承类吗)
2014/07/22 面试题
高中毕业的自我鉴定
2013/12/09 职场文书
房地产开盘策划方案
2014/02/10 职场文书
《凡卡》教学反思
2014/04/09 职场文书
低碳环保倡议书
2014/04/14 职场文书
践行党的群众路线心得体会
2014/11/05 职场文书
焦点访谈观后感
2015/06/11 职场文书
红色影片观后感
2015/06/18 职场文书
2015秋季运动会通讯稿
2015/07/18 职场文书
tensorflow学习笔记之tfrecord文件的生成与读取
2021/03/31 Python