AngularJs学习第五篇从Controller控制器谈谈$scope作用域
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内置的作用域。
此实例的只是把输入的值打印到控制台中，如图：
仅此而已，简单吧。
多个控制器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按钮，会出现你所期望的结果吗?
结果是否和你想你的一样呢，大家可以看到这个结果为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>
在段代码中我添加了几个函数，同时改变了第二个控制器的函数。
结果：
确实发生了。
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。
$scope 作用域问题，在使用controller时 要明白其作用域。
相关推荐
-
AngularJS利用Controller完成URL跳转
具体写法举例: 1.js定义一个controller function MyCtrl($scope, $location) { $scope.jumpToUrl = function(path) { //TODO:add code here }; } 2.html里面应用controller <div ng-controller='MyCtrl'> <button ng-click="jumpToUrl('/signin')">signin</button
-
angularJS+requireJS实现controller及directive的按需加载示例
最近因为项目的比较大,需要加载的js文件较多,为了提高首屏页面的加载速度,需要对js文件进行按需加载,然后网上参考了一些资料,自己也深入研究一番之后,实现了按需加载控制器js文件及指令js文件的效果: 思路如下 1.借助ui-router里面的resolve属性来实现预加载 2.需要借助$controllerProvider动态去注册控制器,$compileProvider动态去注册指令 3.需要借助$q来帮助我们实现异步加载,具体步骤如下所示: 1.在我们定义的app(在定义app.confi
-
Angularjs中controller的三种写法分享
前言 在Angular中,Directive.Service.Filter.Controller都是以工厂方法的方式给出,而工厂方法的参数名对应着该工厂方法依赖的Service.angularjs中controller其实就是一个方法,它有三种写法,下面来一起看看吧. 第一种: <pre name="code" class="javascript">var AppController = ['$scope', function($scope){ $sco
-
AngularJS 控制器 controller的详解
AngularJS 控制器 controller的详解 一.控制器概念 控制器在Angualrjs 中的作用是增强视图,并且是一个函数,用来向视图的作用域中添加额外的功能.我们用它来给作用域对象设置初始状态,并添加自定义行为. 当我们在页面上创建一个新的控制器是,angularjs会生成并传递一个新的$scope给这个控制器.可以在这个控制器里初始化$scope,由于angularjs会负责处理控制器的实例化过程. 列子: var app=angular.module("myApp",
-
详解Angularjs在控制器(controller.js)中使用过滤器($filter)格式化日期/时间实例
Angularjs内置的过滤器(filter)为我们的数据信息格式化提供了比较强大的功能,比如:格式化时间,日期.格式化数字精度.语言本地化.格式化货币等等.但这些过滤器一般都是在VIEW中使用的,比如格式化时间/日期的VIEW视图代码: <div ng-app> <p> <label>Select a date</label> <input type="date" id="date" ng-model=&quo
-
AngularJS控制器controller给模型数据赋初始值的方法
本文实例讲述了AngularJS控制器controller给模型数据赋初始值的方法.分享给大家供大家参考,具体如下: 之前的文章<AngularJS入门示例之Hello World详解>,很简单的就实现了模型数据和页面显示的自动绑定.现在我们使用控制器,给模型赋初始值.如果使用jQuery来实现变量赋初值,需要在页面加载完成后执行 $("#target").attr("value",selfValue); 使用AngularJS代码如下: <!do
-
Angularjs的Controller间通信机制实例分析
本文实例讲述了Angularjs的Controller间通信机制.分享给大家供大家参考,具体如下: 在Angularjs开发一些经验总结中提到我们需要按照业务区分angular controller,避免过大无所不能的上帝controller,我们把controller分离开了,但是有时候我们需要在controller中通信,一般为比较简单的通信机制,告诉同伴controller我的某个你所关心的东西改变了,怎么办?如果你是一个javascript程序员你会很自然的想到异步回调响应式通信-事件机
-
AngularJS控制器controller正确的通信的方法
AngularJS是一款非常强大的前端MVC框架,AngularJS中的controller是个函数,用来向视图的作用域($scope)添加额外的功能,我们用它来给作用域对象设置初始状态,并添加自定义行为. 当我们在创建新的控制器时,angularJS会帮我们生成并传递一个新的$scope对象给这个controller,在angularJS应用的中的任何一个部分,都有父级作用域的存在,顶级就是ng-app所在的层级,它的父级作用域就是$rootScope. 每个$scope的$root指向$ro
-
AngularJS实现controller控制器间共享数据的方法示例
本文实例讲述了AngularJS实现controller控制器间共享数据的方法.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html ng-app="myapp"> <head> <title>www.jb51.net 控制器间共享数据</title> <link rel="stylesheet" href="http://netdna.bootstrapcdn.co
-
AngularJs学习第五篇从Controller控制器谈谈$scope作用域
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
-
AngularJs学习第八篇 过滤器filter创建
demo 这是整个示例demo 1.filter.js文件 angular.module("exampleApp", []) .constant("productsUrl", "http://localhost:/products") .controller("defaultCtrl", function ($scope, $http, productsUrl) { $http.get(productsUrl).success
-
Javascript入门学习第五篇 js函数第1/2页
1 ,函数: function是一个定义一次 却可以多次调用的js代码. 当一个函数被一个对象调用时,那么这个函数就叫做这个对象的方法. function cssrain( x , y) { //code } 解释: cssrain : 为函数名: ( ) : 为 运算符: x , y : 为 参数: 2 ,函数的返回值: function a(x){ document.write(x); } function b(y){ document.write(y
-
详解angularjs 学习之 scope作用域
简介 Scope(作用域) 是应用在 HTML (视图) 和 JavaScript (控制器)之间的纽带. Scope 是一个存储应用数据模型的对象,有可用的方法和属性. Scope 可应用在视图和控制器上. 作用域是Web应用的控制器和视图之间的粘结剂: 控制器 --> 作用域 --> 视图(DOM) 指令 --> 作用域 --> 视图(DOM) 当你在 AngularJS 创建控制器时,你可以将 $scope 对象当作一个参数传递: <div ng-controller=
-
AngularJS学习第一篇 AngularJS基础知识
AngularJS学习第一篇,了解指令.过滤器等相关内容. 指令 AngularJS 指令是扩展的 HTML 属性,带有前缀 ng- 1. ng-app: 定义了 AngularJS 应用程序的根元素: ng-app 指令在网页加载完毕时会自动引导(自动初始化)应用程序: <div ng-app="Demo"></div> 2. ng-init: 为 AngularJS 应用程序定义了 初始值: 通常情况下,我们使用一个控制器或模块来代替它: <div n
-
AngularJS中controller控制器继承的使用方法
前沿 最近在angularjs项目当中,看到 controller 好多都是重复性的代码,在 controller 当中有好多代码很相似 function(比如 controller 下的 CRUD 方法),重复性工作太多.后来想,可不可以提出一个service ,但仔细想想,这些CRUD 本来就是从 Service 中调用的,如果在提出Service,会造成 Service 比较混乱,职责不清晰 . 因为自己做过一些后端,借助后端的思想,是不是可以 controller 继承. control
-
对angularJs中controller控制器scope父子集作用域的实例讲解
1.ctrl1是父级控制器,ctrl2和ctrl3都是ctrl1的子级控制器, 2.父级ctrl1中name值的改变会影响ctrl2和ctrl3中name值的改变, 3.但是ctrl2有自己的name输入传的值,不会影响ctrl1和ctrl3,这就是继承隔离, 4.ctrl3无name赋值就继承父级ctrl1中的name的值. 一.继承隔离的情况 <div ng-app="module"> <div ng-controller="ctrl1">
-
AngularJS学习笔记之依赖注入详解
最近在看AngularJS权威指南,由于各种各样的原因(主要是因为我没有money,好讨厌的有木有......),于是我选择了网上下载电子版的(因为它不要钱,哈哈...),字体也蛮清晰的,总体效果还不错.但是,当我看到左上角的总页码的时候,479页....479....479....俺的小心脏被击穿了二分之一有木有啊,上半身都石化了有木有啊,那种特别想学但是看到页码又不想学的纠结的心情比和女朋友吵架了还复杂有木有啊,我平常看的电子书百位数都不大于3的好伐! 哎,原谅我吧,我应该多看几本新华字典习
-
AngularJS入门心得之directive和controller通信过程
AngularJS 通过新的属性和表达式扩展了 HTML.Angularjs学习起来也非常的简单. 1.AngularJS是何方神圣 Angular JS (Angular.JS) 是一组用来开发Web页面的框架.模板以及数据绑定和丰富UI组件.它支持整个开发进程,提供web应用的架构,无需进行手工DOM操作. AngularJS是为了克服HTML在构建应用上的不足而设计的.HTML是一门很好的为静态文本展示设计的声明式语言,但要构建WEB应用的话它就显得乏力了.这里AngularJS就应运而生