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 相关文章推荐
javascript打印大全(打印页面设置/打印预览代码)
Mar 29 Javascript
jQuery之选项卡的简单实现
Feb 28 Javascript
js处理表格对table进行修饰
May 26 Javascript
全面解析Bootstrap中Carousel轮播的使用方法
Jun 13 Javascript
完美解决js传递参数中加号和&amp;号自动改变的方法
Oct 11 Javascript
easyui combogrid实现本地模糊搜索过滤多列
May 13 Javascript
ztree实现权限横向显示功能
May 20 Javascript
JavaScript获取tr td 的三种方式全面总结(推荐)
Aug 15 Javascript
JS实现区分中英文并统计字符个数的方法示例
Jun 09 Javascript
React Router V4使用指南(精讲)
Sep 17 Javascript
深入解析koa之中间件流程控制
Jun 17 Javascript
如何解决js函数防抖、节流出现的问题
Jun 17 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
dedecms模版制作使用方法
2007/04/03 PHP
php中将一个对象保存到Session中的方法
2015/03/13 PHP
标准版Eclipse搭建PHP环境的详细步骤
2015/11/18 PHP
Yii2简单实现多语言配置的方法
2016/07/23 PHP
THINKPHP5.1 Config的配置与获取详解
2020/06/08 PHP
jquery 框架使用教程 AJAX篇
2009/10/11 Javascript
myeclipse安装jQuery插件的方法
2011/03/29 Javascript
基于JQuery的抓取博客园首页RSS的代码
2011/12/01 Javascript
定时器(setTimeout/setInterval)调用带参函数失效解决方法
2013/03/26 Javascript
PHP abstract与interface之间的区别
2013/11/11 Javascript
用js设置下拉框为只读的小技巧
2014/04/10 Javascript
JavaScript判断表单提交时哪个radio按钮被选中的方法
2015/03/21 Javascript
PHP+mysql+Highcharts生成饼状图
2015/05/04 Javascript
学习使用AngularJS文件上传控件
2016/02/16 Javascript
浅谈AngularJS中ng-class的使用方法
2016/11/11 Javascript
详解vue服务端渲染(SSR)初探
2017/06/19 Javascript
vue element-ui 绑定@keyup事件无效的解决方法
2018/03/09 Javascript
JS常用的几种数组遍历方式以及性能分析对比实例详解
2018/04/11 Javascript
如何让node运行es6模块文件及其原理详解
2018/12/11 Javascript
js canvas实现5张图片合成一张图片
2019/07/15 Javascript
Python中使用不同编码读写txt文件详解
2015/05/28 Python
Python网页正文转换语音文件的操作方法
2018/12/09 Python
利用python-pypcap抓取带VLAN标签的数据包方法
2019/07/23 Python
Python configparser模块封装及构造配置文件
2020/08/07 Python
python实现人性化显示金额数字实例详解
2020/09/25 Python
Python Charles抓包配置实现流程图解
2020/09/29 Python
python爬取音频下载的示例代码
2020/10/19 Python
python3从网络摄像机解析mjpeg http流的示例
2020/11/13 Python
详解CSS3的图层阴影和文字阴影效果使用
2016/06/09 HTML / CSS
ReVive利维肤美国官网:RéVive Skincare
2018/04/18 全球购物
全球性的众包图形设计市场:DesignCrowd
2021/02/02 全球购物
投标担保书范文
2014/04/02 职场文书
初婚未育证明样本
2015/06/18 职场文书
房地产置业顾问工作总结
2015/10/23 职场文书
教师教育心得体会
2016/01/19 职场文书
写作技巧:怎样写好一份优秀工作总结?
2019/08/14 职场文书