AngularJs学习第五篇从Controller控制器谈谈$scope作用域


Posted in Javascript onJune 08, 2016

Controller的创建

AngularJs controller使用无处不在,在里代码演示比较简单的创建工作。

<!DOCTYPE html>
<html xmlns="http://www.w.org//xhtml" ng-app="exampleApp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-"/>
<title>App</title>
<script src="angular.js"></script>
<link href="bootstrap-theme.css" rel="stylesheet" />
<link href="bootstrap.css" rel="stylesheet" />
<script>
angular.module("exampleApp", [])
.controller("defaultCtrl", function ($scope) {
$scope.setInput = function (value) {
console.log("print:" + value);
}
});
</script>
</head>
<body ng-controller="defaultCtrl"> 
<div class="well">
<h>Count</h>
<div class="form-group">
<input class="form-control" required ng-model="value" />
<button ng-click="setInput(value)">Click</button>
</div>
</div>
</body>
</html>

在这控制很简单,首先我在html 中添加了 ng-app 属性,表示module的作用范围。

在 body 中添加了 ng-controller 表示 defaultCtrl 控制器的作用范围。

input 便签中ng-model 指令的是绑定数据,双向数据绑定(MVVM)。

$scope 是AngularJs内置的作用域。

此实例的只是把输入的值打印到控制台中,如图:

AngularJs学习第五篇从Controller控制器谈谈$scope作用域

仅此而已,简单吧。

多个控制器controller作用域问题

现在我们来改造下程序,

<body >
<div class="well" ng-controller="defaultCtrl">
<h>Count</h>
<div class="form-group">
<input class="form-control" required ng-model="value" />
<button ng-click="setInput(value)">Click</button>
</div>
</div>
<div class="well" ng-controller="defaultCtrl">
<h>Count</h>
<div class="form-group">
<input class="form-control" required ng-model="value" />
<button ng-click="setInput(value)">Click</button>
</div>
</div>
</body>

其余代码不变,我只是把放到body 中的属性 ng-controller 放到了两个div中。我重用了defaultCtrl控制器,猜想下,如果我在第一个input标签输入内容,我点击第二个控制器的button按钮,会出现你所期望的结果吗?

AngularJs学习第五篇从Controller控制器谈谈$scope作用域

结果是否和你想你的一样呢,大家可以看到这个结果为undefined. 在个很好解释,应为他们的作用域不同,虽然你重复使用了统一控制器,但是在创建作用域确实不同的。

调用的工厂函数会返回不同的作用域。

那么如何进行不同作用域之间的访问呢,在Angularjs中对于作用域访问有个$rootScope 。

在这里有三个函数需要介绍下,

$on(name,handler) 注册一个事件处理函数,该函数在特定的事件被当前作用域收到时将被调用。

$emit(name,args) 向当前父作用域发送一个事件,直至根作用域。

$broadcast(name,args) 向当前作用域下的子作用域发送一个事件,参数是事件名称以及一个用于作用向事件提供额外数据的对象。

现在来更改下代码:

<script>
angular.module("exampleApp", [])
.controller("defaultCtrl", function ($scope,$rootScope) {
$scope.$on("UpdateValue", function (event, args) {
$scope.input = args.zip;
});
$scope.setInput = function (value) {
$rootScope.$broadcast("UpdateValue", { zip: value });
console.log("print:" + $scope.input);
}
$scope.copy = function () {
console.log("copy:" + $scope.input);
};
});
</script> 
<div class="well" ng-controller="defaultCtrl">
<h>Count</h>
<div class="form-group">
<input class="form-control" required ng-model="value" />
<button ng-click="copy()">Copy</button>
</div>
</div>

在段代码中我添加了几个函数,同时改变了第二个控制器的函数。

结果:

AngularJs学习第五篇从Controller控制器谈谈$scope作用域

确实发生了。

controller继承

<script>
angular.module("exampleApp", [])
.controller("defaultCtrl", function ($scope, $rootScope) {
//$scope.$on("UpdateValue", function (event, args) {
// $scope.input = args.zip;
//});
$scope.setInput = function (value) {
//$rootScope.$broadcast("UpdateValue", { zip: value });
$scope.input = value;
console.log("print:" + $scope.input);
}
$scope.copy = function () {
console.log("copy:" + $scope.input);
};
})
.controller("simpleCtrl", function ($scope) {
$scope.copy = function () {
console.log("copy:" + $scope.input);
};
});
</script>
<body ng-controller="defaultCtrl">
<div class="well">
<h>Count</h>
<div class="form-group">
<input class="form-control" required ng-model="value" />
<button ng-click="setInput(value)">Click</button>
</div>
</div>
<div class="well" ng-controller="simpleCtrl">
<h>Count</h>
<div class="form-group">
<input class="form-control" required ng-model="value" />
<button ng-click="copy()">Copy</button>
</div>
</div>
</body>

我添加了一个控制器,simpleCtrl 仔细观察下,发现defaultCtrl 包含了simpleCtrl 中,所以作用simple 也继承 了。

结果图:发下我在第一个窗中输入时,第二个也变了,应为都是同一个value。

AngularJs学习第五篇从Controller控制器谈谈$scope作用域

$scope 作用域问题,在使用controller时 要明白其作用域。

Javascript 相关文章推荐
jQuery插件 selectToSelect使用方法
Oct 02 Javascript
js模拟点击以提交表单为例兼容主流浏览器
Nov 29 Javascript
javascript中数组中求最大值示例代码
Dec 18 Javascript
js简单抽奖代码
Jan 16 Javascript
jQuery设置和移除文本框默认值的方法
Mar 09 Javascript
解决jquery无法找到其他父级子集问题的方法
May 10 Javascript
深入理解JS addLoadEvent函数
May 20 Javascript
微信小程序倒计时功能实例代码
Jul 17 Javascript
vuex实现及简略解析(小结)
Mar 01 Javascript
node静态服务器实现静态读取文件或文件夹
Dec 03 Javascript
js判断一个对象是数组(函数)的方法实例
Dec 19 Javascript
手把手教你实现 Promise的使用方法
Sep 02 Javascript
jQuery购物车插件jsorder用法(支持后台处理程序直接转换成DataTable处理)
Jun 08 #Javascript
玩转JavaScript OOP - 类的实现详解
Jun 08 #Javascript
Javascript之String对象详解
Jun 08 #Javascript
浅谈JavaScript函数的四种存在形态
Jun 08 #Javascript
jQuery Ajax和getJSON获取后台普通json数据和层级json数据用法分析
Jun 08 #Javascript
关于session和cookie的简单理解
Jun 08 #Javascript
jQuery封装的屏幕居中提示信息代码
Jun 08 #Javascript
You might like
浅谈web上存漏洞及原理分析、防范方法(安全文件上存方法)
2013/06/29 PHP
PHP网站开发中常用的8个小技巧
2015/02/13 PHP
php中mysql操作buffer用法详解
2015/03/19 PHP
检测codeigniter脚本消耗内存情况的方法
2015/03/21 PHP
微信JSSDK分享功能图文实例详解
2019/04/08 PHP
js 变量类型转换常用函数与代码[比较全]
2009/12/01 Javascript
取选中的radio的值
2010/01/11 Javascript
阻止事件(取消浏览器对事件的默认行为并阻止其传播)
2013/11/03 Javascript
js事件监听机制(事件捕获)总结
2014/08/08 Javascript
javascript检测是否联网的实现代码
2014/09/28 Javascript
jQuery simplePage+AJAX plus分页插件用法实例
2016/02/17 Javascript
JS控制伪元素的方法汇总
2016/04/06 Javascript
JavaScript判断数组是否存在key的简单实例
2016/08/03 Javascript
Jquery组件easyUi实现手风琴(折叠面板)示例
2016/08/23 Javascript
jQuery使用ajax方法解析返回的json数据功能示例
2017/01/10 Javascript
vue.js通过路由实现经典的三栏布局实例代码
2018/07/08 Javascript
在vue项目中正确使用iconfont的方法
2018/09/28 Javascript
vue+axios 前端实现登录拦截的两种方式(路由拦截、http拦截)
2018/10/24 Javascript
jQuery鼠标滑过横向时间轴样式(代码详解)
2019/11/01 jQuery
[02:23]2018DOTA2亚洲邀请赛趣味视频——反应测试
2018/04/04 DOTA
[01:05:07]DOTA2-DPC中国联赛 正赛 DLG vs Dragon BO3 第一场2月1日
2021/03/11 DOTA
Python内置函数bin() oct()等实现进制转换
2012/12/30 Python
Python实现备份MySQL数据库的方法示例
2018/01/11 Python
Python中实现单例模式的n种方式和原理
2018/11/14 Python
django中间键重定向实例方法
2019/11/10 Python
Numpy 多维数据数组的实现
2020/06/18 Python
基于Python的图像阈值化分割(迭代法)
2020/11/20 Python
英国领先的新鲜松露和最好的松露产品供应商:TruffleHunter
2019/08/26 全球购物
名词解释WEB SERVICE,SOAP,UDDI,WSDL,JAXP,JAXM;JSWDL开发包的介绍。
2012/10/27 面试题
大学生怎样进行自我评价
2013/12/07 职场文书
电子邮箱格式怎么写
2014/01/12 职场文书
四风对照检查材料范文
2014/09/27 职场文书
2014年应急管理工作总结
2014/11/26 职场文书
五年级学生评语大全
2014/12/26 职场文书
离婚起诉书范本
2015/05/18 职场文书
Mysql超详细讲解死锁问题的理解
2022/04/01 MySQL