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:void(0)的作用示例介绍
Oct 28 Javascript
使用Script元素发送JSONP请求的方法
Jun 12 Javascript
JavaScript类型系统之布尔Boolean类型详解
Jun 26 Javascript
Angular2 PrimeNG分页模块学习
Jan 14 Javascript
Bootstrap fileinput组件封装及使用详解
Mar 10 Javascript
浅谈Redux中间件的实践
Jul 27 Javascript
在vue中使用echarts图表实例代码详解
Oct 22 Javascript
爬虫利器Puppeteer实战
Jan 09 Javascript
详解微信小程序之scroll-view的flex布局问题
Jan 16 Javascript
微信小程序位置授权处理方法
Jun 13 Javascript
vue自定义switch开关组件,实现样式可自行更改
Nov 01 Javascript
Vue2.x-使用防抖以及节流的示例
Mar 02 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
各种战术和打法的原创者
2020/03/04 星际争霸
Base64在线编码解码实现代码 演示与下载
2011/01/08 PHP
PHP动态分页函数,PHP开发分页必备啦
2011/11/07 PHP
PHP设计模式之装饰者模式
2012/02/29 PHP
PHP实现的登录页面信息提示功能示例
2017/07/24 PHP
Windows下wamp php单元测试工具PHPUnit安装及生成日志文件配置方法
2018/05/28 PHP
checkbox 复选框不能为空
2009/07/11 Javascript
父子窗体间传递JSON格式的数据的代码
2010/12/25 Javascript
火狐textarea输入法的bug的触发及解决
2013/07/24 Javascript
node.js中的fs.chownSync方法使用说明
2014/12/16 Javascript
使用 jQuery.ajax 上传带文件的表单遇到的问题
2016/10/31 Javascript
SVG动画vivus.js库使用小结(实例代码)
2017/09/14 Javascript
详解微信小程序中的页面代码中的模板的封装
2017/10/12 Javascript
浅谈JS对象添加getter与setter的5种方法
2018/06/09 Javascript
node.js Promise对象的使用方法实例分析
2019/12/26 Javascript
如何运行Python程序的方法
2013/04/21 Python
简单讲解Python中的数字类型及基本的数学计算
2016/03/11 Python
Linux中安装Python的交互式解释器IPython的教程
2016/06/13 Python
python机器学习之决策树分类详解
2017/12/20 Python
关于Pycharm无法debug问题的总结
2019/01/19 Python
selenium跳过webdriver检测并模拟登录淘宝
2019/06/12 Python
学习和使用python的13个理由
2019/07/30 Python
python利用后缀表达式实现计算器功能
2021/02/22 Python
基于HTML5 audio元素播放声音jQuery小插件
2011/05/11 HTML / CSS
html5绘制时钟动画
2014/12/15 HTML / CSS
可持续木材、生态和铝制太阳镜:Proof Eyewear
2019/07/24 全球购物
加拿大留学自荐信
2014/01/28 职场文书
小学端午节活动方案
2014/03/13 职场文书
毕业自我鉴定书
2014/03/24 职场文书
2014年招商引资工作总结
2014/11/22 职场文书
2016大学生国家助学贷款承诺书
2016/03/25 职场文书
导游词之阆中古城
2019/12/23 职场文书
Pytorch中Softmax与LogSigmoid的对比分析
2021/06/05 Python
Nginx部署vue项目和配置代理的问题解析
2021/08/04 Servers
详细聊一聊mysql的树形结构存储以及查询
2022/04/05 MySQL
vue-cli3.0修改打包后的文件名和文件地址,打包后本地运行报错解决
2022/04/06 Vue.js