详解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 相关文章推荐
网页设计常用的一些技巧
Dec 22 Javascript
myeclipse安装jQuery插件的方法
Mar 29 Javascript
在IE和VB中支持png图片透明效果的实现方法(vb源码打包)
Apr 01 Javascript
基于jquery的从一个页面跳转到另一个页面的指定位置的实现代码(带平滑移动的效果)
May 24 Javascript
Extjs Gird 支持中文拼音排序实现代码
Apr 15 Javascript
JS中eval函数的使用示例
Jul 21 Javascript
Javascript 命名空间模式
Nov 01 Javascript
Knockout数组(observable)使用详解示例
Nov 15 Javascript
解析Javascript中大括号“{}”的多义性
Dec 02 Javascript
js简单实现删除记录时的提示效果
Dec 05 Javascript
JS实现可点击展开与关闭的左侧广告代码
Sep 02 Javascript
模块化react-router配置方法详解
Jun 03 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/10/09 PHP
PHP分页显示制作详细讲解
2006/12/05 PHP
测试您的 PHP 水平的题目
2007/05/30 PHP
PHP parse_url 一个好用的函数
2009/10/03 PHP
php将数据库中所有内容生成静态html文档的代码
2010/04/12 PHP
php自动提交表单的方法(基于fsockopen与curl)
2016/05/09 PHP
Centos 6.5系统下编译安装PHP 7.0.13的方法
2016/12/19 PHP
php获取今日开始时间和结束时间的方法
2017/02/27 PHP
ppk谈JavaScript style属性
2008/10/10 Javascript
JavaScript DOM 学习第九章 选取范围的介绍
2010/02/19 Javascript
Jquery Select操作方法集合脚本之家特别版
2010/05/17 Javascript
合并table相同单元格的jquery插件分享(很精简)
2011/06/20 Javascript
jQuery实现点击该行即可删除HTML表格行
2014/10/17 Javascript
JavaScript变量声明详解
2014/11/27 Javascript
jquery中EasyUI实现异步树
2015/03/01 Javascript
angularjs学习笔记之完整的项目结构
2015/09/26 Javascript
Bootstrap源码解读导航条(7)
2016/12/23 Javascript
vue中过滤器filter的讲解
2019/01/21 Javascript
JS/jQuery实现超简单的Table表格添加,删除行功能示例
2019/07/31 jQuery
[33:33]完美世界DOTA2联赛PWL S2 FTD.C vs SZ 第二场 11.27
2020/11/30 DOTA
在Python中操作字典之fromkeys()方法的使用
2015/05/21 Python
Python PyQt5实现的简易计算器功能示例
2017/08/23 Python
python 全局变量的import机制介绍
2017/09/07 Python
Python引用传值概念与用法实例小结
2017/10/07 Python
关于Python数据结构中字典的心得
2017/12/04 Python
浅谈机器学习需要的了解的十大算法
2017/12/15 Python
Python+PyQT5的子线程更新UI界面的实例
2019/06/14 Python
python3 线性回归验证方法
2019/07/09 Python
Pytorch 卷积中的 Input Shape用法
2020/06/29 Python
Java如何格式化日期
2012/08/07 面试题
电大自我鉴定范文
2013/10/01 职场文书
药学专业个人自我评价
2013/11/11 职场文书
优秀毕业生推荐信范文
2014/03/07 职场文书
动漫设计与制作专业推荐信
2014/07/07 职场文书
推广普通话共筑中国梦演讲稿
2014/09/21 职场文书
县委班子四风对照检查材料思想汇报
2014/09/29 职场文书