AngularJs(五）从Controller控制器谈谈$scope作用域
大纲
用于简单示例和简单应用的controller 应用
多个controller应用的作用域问题
controller继承作用域问题
Controller的创建
AngularJs controller使用无处不在，在里代码演示比较简单的创建工作。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" ng-app="exampleApp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<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">
<h3>Count</h3>
<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内置的作用域。
此实例的只是把输入的值打印到控制台中，如图：
仅此而已，简单吧。
多个控制器controller作用域问题
现在我们来改造下程序，
<body >
<div class="well" ng-controller="defaultCtrl">
<h3>Count</h3>
<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">
<h3>Count</h3>
<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按钮，会出现你所期望的结果吗?
结果是否和你想你的一样呢，大家可以看到这个结果为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">
<h3>Count</h3>
<div class="form-group">
<input class="form-control" required ng-model="value" />
<button ng-click="copy()">Copy</button>
</div>
</div>
在段代码中我添加了几个函数，同时改变了第二个控制器的函数。
结果：
确实发生了。
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">
<h3>Count</h3>
<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">
<h3>Count</h3>
<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。
$scope 作用域问题，在使用controller时 要明白其作用域。
AngularJs(五）从Controller控制器谈谈$scope作用域的更多相关文章
- angularjs的ng-repeat指令下的scope作用域
ng-repeat指令在迭代的时候,每次迭代都会创建一个新的scope,比如下面的代码: <div ng-repeat="list in lists" ng-controll ...
- AngularJs之Scope作用域
前言: 上篇博文AngularJs之directive中说了Scope作用域是个大坑,所以拿出来作为重点总结! 什么是scope AngularJS 中,作用域是一个指向应用模型的对象,它是表达式的执 ...
- AngularJS学习之旅—AngularJS Scope作用域(五)
1.AngularJS Scope(作用域) Scope(作用域) 是应用在 HTML (视图) 和 JavaScript (控制器)之间的纽带. Scope 是一个对象,有可用的方法和属性. Sco ...
- 转深入理解 AngularJS 的 Scope作用域
文章转载英文:what-are-the-nuances-of-scope-prototypal-prototypical-inheritance-in-angularjs 中文:http://www. ...
- AngularJS Scope(作用域)
1. AngularJS Scope(作用域) Scope(作用域) 是应用在 HTML (视图) 和 JavaScript (控制器)之间的纽带. Scope 是一个对象,有可用的方法和属性. Sc ...
- 关于AngularJS学习整理---浅谈$scope(作用域) 新手必备！
作为初次接触 AngularJS的新手,想要深层理解里面的内容短时间还是不可能的,所以标题写了浅谈字样,以下内容是参考各位大神以及相关书籍整理加个人理解,出现错误的地方请大家指正. $scope(作用 ...
- AngularJS–Scope(作用域)
点击查看AngularJS系列目录 转载请注明出处:http://www.cnblogs.com/leosx/ Scope Scope 是一个应用程序的模块的对象.它是表达式的执行上下文.它充斥在DO ...
- 【angularJS】Controller控制器
1. 定义 控制器(Controller)在AngularJS中作用是增强视图(View),AngularJS控制器是一个构造方法,用来向视图(View)中添加额外功能. ng-controller指 ...
- 一招制敌 - 玩转 AngularJS 指令的 Scope (作用域),讲得特别好
学习了AngularJS挺长时间,最近再次回首看看指令这部分的时候,觉得比自己刚开始学习的时候理解的更加深入了,尤其是指令的作用域这部分. 步入正题: 每当一个指令被创建的时候,都会有这样一个选择,是 ...
随机推荐
- OSCHina技术导向：开源企业ERP系统Opentaps
opentaps Open Source ERP + CRM 基于 Apache OFBiz (The Open For Business Project ) 构建, 是一款设计良好, 逐渐流行起来的 ...
- [C++ 2011 STL (VS2012 Update4) 源代码阅读系列(2)]熟悉一些宏定义和模版偏特化或叫模版专门化
[C++ 2011 STL (VS2012 Update4) 源代码阅读系列(2)]熟悉一些宏定义和模版偏特化或叫模版专门化 // point_test.cpp : 知识点练习和测试,用于单步调试,跟 ...
- MySQL --概述--
Mysql是最流行的关系型数据库管理,在Web应用方面MySQL是最好的RDBMS:关系数据库管理系统 什么是数据库? 数据库(Database)是按照数据结构来组织,存储和管理数据的仓库. 每个数据 ...
- OpenCms创建站点过程图解——献给OpenCms的刚開始学习的人们
非常多人都听说了OpenCms,知道了它的强大,索性的下载安装了,最终见到了久违OpenCms,看到了它简洁的界面,欣喜过后却不免一脸茫然,这个东西怎么用,我怎么用它来建站,从哪開始,无从下手,找资料 ...
- 聚类算法初探（四）K-means
最近由于工作需要,对聚类算法做了一些相关的调研.现将搜集到的资料和自己对算法的一些理解整理如下,供大家参考. 另外在算法代码方面,我也做了一些实现(包括串行和并行),欢迎感兴趣的朋友探讨和交流. 第一 ...
- Java内存泄漏分析与解决方案
Java内存泄漏是每个Java程序员都会遇到的问题,程序在本地运行一切正常,可是布署到远端就会出现内存无限制的增长,最后系统瘫痪,那么如何最快最好的检测程序的稳定性,防止系统崩盘,作者用自已的亲身经历 ...
- 使用FileSystemWatcher捕获系统文件状态
源代码: using System; using System.Collections.Generic; using System.Linq; using System.Text; using Sys ...
- 《JavaScript 闯关记》
为何写作此课程 stone 主要负责基于 Web 的企业内部管理系统的开发,虽然能够熟练地使用 JavaScript,但随着对 JavaScript 的理解越来越深,才发现自己尚未掌握其精髓. 201 ...
- 转：消除SDK更新时的“https://dl-ssl.google.com refused”错误
消除SDK更新时,有可能会出现这样的错误: Download interrupted: hostname in certificate didn't match: <dl-ssl.google. ...
- Spring-----3、Spring的核心机制（依赖注入）
转载自:http://blog.csdn.net/hekewangzi/article/details/41345237