详解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 Tools Dateinput使用介绍
Jul 14 Javascript
解析javascript 浏览器关闭事件
Jul 08 Javascript
JQUERY 设置SELECT选中项代码
Feb 07 Javascript
延时加载JavaScript代码提高速度
Dec 27 Javascript
基于JavaScript实现div层跟随滚动条滑动
Jan 12 Javascript
Bootstrap导航条可点击和鼠标悬停显示下拉菜单的实现代码
Jun 23 Javascript
Angularjs结合Bootstrap制作的一个TODO List
Aug 18 Javascript
jquery 获取索引值在一定范围的列表方法
Jan 25 jQuery
在小程序中使用Echart图表的示例代码
Aug 02 Javascript
解决layui中table异步数据请求不支持自定义返回数据格式的问题
Aug 19 Javascript
如何手动实现es5中的bind方法详解
Dec 07 Javascript
判断JavaScript中的两个变量是否相等的操作符
Dec 21 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 5.0对象模型深度探索之类的静态成员
2008/03/27 PHP
PHP与MYSQL中UTF8编码的中文排序实例
2014/10/21 PHP
CodeIgniter使用smtp服务发送html邮件的方法
2015/06/10 PHP
php操作redis常见方法示例【key与value操作】
2020/04/14 PHP
JQuery中使用Ajax赋值给全局变量失败异常的解决方法
2014/08/18 Javascript
Egret引擎开发指南之运行项目
2014/09/03 Javascript
JavaScript编程中的Promise使用大全
2015/07/28 Javascript
JS实现日期时间动态显示的方法
2015/12/07 Javascript
Easyui Treegrid改变默认图标的方法
2016/04/29 Javascript
iframe中使用jquery进行查找的方法【案例分析】
2016/06/17 Javascript
基于jQuery实现一个marquee无缝滚动的插件
2017/03/09 Javascript
js构建二叉树进行数值数组的去重与优化详解
2018/03/26 Javascript
Vue开发之封装分页组件与使用示例
2019/04/25 Javascript
Vue 嵌套路由使用总结(推荐)
2020/01/13 Javascript
JS数据类型(基本数据类型、引用数据类型)及堆和栈的区别分析
2020/03/04 Javascript
[02:59]DOTA2完美大师赛主赛事第三日精彩集锦
2017/11/25 DOTA
[02:10]探秘浦东源深体育馆 DOTA2 Supermajor不见不散
2018/05/17 DOTA
在Python 3中实现类型检查器的简单方法
2015/07/03 Python
Python实现的多线程http压力测试代码
2017/02/08 Python
python 如何快速找出两个电子表中数据的差异
2017/05/26 Python
python+matplotlib实现鼠标移动三角形高亮及索引显示
2018/01/15 Python
python实时获取外部程序输出结果的方法
2019/01/12 Python
Python基于内置库pytesseract实现图片验证码识别功能
2020/02/24 Python
Python填充任意颜色,不同算法时间差异分析说明
2020/05/16 Python
is_file和file_exists效率比较
2021/03/14 PHP
CSS3绘制六边形的简单实现
2016/08/25 HTML / CSS
BannerBuzz加拿大:在线定制横幅印刷、广告和标志
2020/03/10 全球购物
关于幼儿的自我评价
2013/12/18 职场文书
项目合作计划书
2014/01/09 职场文书
会计职业生涯规划书
2014/01/13 职场文书
文秘档案管理岗位职责
2014/03/06 职场文书
年终晚会主持词
2014/03/25 职场文书
群众路线党课主持词
2014/04/01 职场文书
政法干警核心价值观心得体会
2014/09/11 职场文书
电力培训学习心得体会
2016/01/11 职场文书
python函数指定默认值的实例讲解
2021/03/29 Python