AngularJs学习第五篇从Controller控制器谈谈$scope作用域

 更新时间:2016年06月08日 10:00:41   作者:Company   我要评论

这篇文章主要介绍了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中table表格基本操作示例

    AngularJS中table表格基本操作示例

    这篇文章主要介绍了AngularJS中table表格基本操作,涉及AngularJS针对table表格元素与属性的相关动态操作技巧,需要的朋友可以参考下
    2017-10-10
  • es6+angular1.X+webpack 实现按路由功能打包项目的示例

    es6+angular1.X+webpack 实现按路由功能打包项目的示例

    本篇文章主要介绍了es6+angular1.X+webpack 实现按路由功能打包项目的示例,具有一定的参考价值,有需要的可以了解一下
    2017-08-08
  • AngularJS模糊查询功能实现代码(过滤内容下拉菜单排序过滤敏感字符验证判断后添加表格信息)

    AngularJS模糊查询功能实现代码(过滤内容下拉菜单排序过滤敏感字

    最近做项目遇到这样的需求,要求添加球员的功能,具体样式没做具体要求,下面小编给大家带来了AngularJS模糊查询功能实现代码(过滤内容下拉菜单排序过滤敏感字符验证判断后添加表格信息),感兴趣的朋友一起看看吧
    2017-10-10
  • 什么是 AngularJS?AngularJS简介

    什么是 AngularJS?AngularJS简介

    这篇文章主要介绍了什么是 AngularJS?AngularJS简介,本文讲解了AngularJS方方面面的基础知识,AngularJS 是一个为动态WEB应用设计的结构框架。它能让你使用HTML作为模板语言,通过扩展HTML的语法,让你能更清楚、简洁地构建你的应用组件,需要的朋友可以参考下
    2014-12-12
  • Angular4集成ng2-file-upload的上传组件

    Angular4集成ng2-file-upload的上传组件

    本篇文章主要介绍了Angular4集成ng2-file-upload的上传组件,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-03-03
  • Angular刷新当前页面的实现方法

    Angular刷新当前页面的实现方法

    这篇文章主要介绍了Angular刷新当前页面的实现方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-11-11
  • Angular2 父子组件数据通信实例

    Angular2 父子组件数据通信实例

    这篇文章主要介绍了Angular2 父子组件数据通信实例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-06-06
  • AngularJS基于MVC的复杂操作实例讲解

    AngularJS基于MVC的复杂操作实例讲解

    下面小编就为大家分享一篇AngularJS基于MVC的复杂操作实例讲解,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2017-12-12
  • AngularJS  $modal弹出框实例代码

    AngularJS $modal弹出框实例代码

    这篇文章主要介绍了AngularJS 弹出框 $modal,大家都知道open是$modal唯一方法,通过本文给大家列出了该方法的属性。对angularjs弹出框知识感兴趣的朋友一起看下吧
    2016-08-08
  • angularjs数组判断是否含有某个元素的实例

    angularjs数组判断是否含有某个元素的实例

    下面小编就为大家分享一篇angularjs数组判断是否含有某个元素的实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-02-02

最新评论