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 相关文章推荐
网页图片延时加载的js代码
Apr 22 Javascript
JS中产生20位随机数以0-9为例也可以是a-z A-Z
Aug 01 Javascript
jQuery中extend函数详解
Jul 13 Javascript
js创建对象的方法汇总
Jan 07 Javascript
js和C# 时间日期格式转换的简单实例
May 28 Javascript
bootstrap 下拉多选框进行多选传值问题代码分析
Feb 14 Javascript
推荐三款日期选择插件(My97DatePicker、jquery.datepicker、Mobiscroll)
Apr 21 jQuery
解决vue+webpack打包路径的问题
Mar 06 Javascript
vue使用ElementUI时导航栏默认展开功能的实现
Jul 04 Javascript
在Vuex中Mutations修改状态操作
Jul 24 Javascript
JavaScript 绘制饼图的示例
Feb 19 Javascript
vue项目支付功能代码详解
Feb 18 Vue.js
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
关于Iframe如何跨域访问Cookie和Session的解决方法
2013/04/15 PHP
PHP在线书签系统分享
2016/01/04 PHP
php强大的时间转换函数strtotime
2016/02/18 PHP
PHP中数组转换为SimpleXML教程
2019/01/27 PHP
容易造成JavaScript内存泄露几个方面
2014/09/04 Javascript
JavaScript解析json格式数据简单示例
2014/12/09 Javascript
JavaScript中的splice()方法使用详解
2015/06/09 Javascript
javascript父子页面通讯实例详解
2015/07/17 Javascript
解决angular的post请求后SpringMVC后台接收不到参数值问题的方法
2015/12/10 Javascript
AngularJs $parse、$eval和$observe、$watch详解
2016/09/21 Javascript
jQuery实现圣诞节礼物传送(花式轮播)
2016/12/25 Javascript
元素全屏的设置与监听实例
2017/11/28 Javascript
微信小程序开发之左右分栏效果的实例代码
2019/05/20 Javascript
js判断鼠标移入移出方向的方法
2020/06/24 Javascript
在Angular项目使用socket.io实现通信的方法
2021/01/05 Javascript
python使用calendar输出指定年份全年日历的方法
2015/04/04 Python
Python中的集合类型知识讲解
2015/08/19 Python
Python循环语句中else的用法总结
2016/09/11 Python
python 容器总结整理
2017/04/04 Python
用python做一个搜索引擎(Pylucene)的实例代码
2017/07/05 Python
使用python语言,比较两个字符串是否相同的实例
2018/06/29 Python
python实现嵌套列表平铺的两种方法
2018/11/08 Python
使用opencv将视频帧转成图片输出
2019/12/10 Python
python主线程与子线程的结束顺序实例解析
2019/12/17 Python
10个python3常用排序算法详细说明与实例(快速排序,冒泡排序,桶排序,基数排序,堆排序,希尔排序,归并排序,计数排序)
2020/03/17 Python
python 利用zmail库发送邮件
2020/09/11 Python
PyQt5结合matplotlib绘图的实现示例
2020/09/15 Python
Python进行特征提取的示例代码
2020/10/15 Python
HTML5拖放功能_动力节点Java学院整理
2017/07/13 HTML / CSS
Ryderwear澳洲官网:澳大利亚高端健身训练装备品牌
2018/09/18 全球购物
如何在C# winform中异步调用web services
2015/09/21 面试题
体操比赛口号
2014/06/10 职场文书
城管执法人员纪律作风整顿思想汇报
2014/09/13 职场文书
2015年度企业工作总结
2015/05/21 职场文书
单位证明范文
2015/06/18 职场文书
浅谈Python数学建模之固定费用问题
2021/06/23 Python