脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → AngularJS → angularjs controller scope 作用域

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之filter过滤器(推荐)

    Angularjs之filter过滤器(推荐)

    这篇文章主要介绍了Angularjs之filter过滤器的相关资料,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
    2016-11-11
  • AngularJS中$injector、$rootScope和$scope的概念和关联关系深入分析

    AngularJS中$injector、$rootScope和$scope的概念和关联关系深入分析

    这篇文章主要介绍了AngularJS中$injector、$rootScope和$scope的概念和关联关系,结合实例形式较为深入的分析了$injector、$rootScope和$scope的概念、功能、使用方法及相互之间的关系,需要的朋友可以参考下
    2017-01-01
  • AngularJS中的表单简单入门

    AngularJS中的表单简单入门

    本文主要介绍AngularJS 表单,这里对AngularJS 表单知识做了详细整理介绍,希望能帮助有需要的小伙伴
    2016-07-07
  • AngularJS向后端ASP.NET API控制器上传文件

    AngularJS向后端ASP.NET API控制器上传文件

    这篇文章主要介绍了AngularJS向后端ASP.NET API控制器上传文件的相关资料,需要的朋友可以参考下
    2016-02-02
  • angular4应用中输入的最小值和最大值的方法

    angular4应用中输入的最小值和最大值的方法

    这篇文章主要介绍了angular4应用中输入的最小值和最大值的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2019-05-05
  • AngularJs 利用百度地图API 定位当前位置 获取地址信息

    AngularJs 利用百度地图API 定位当前位置 获取地址信息

    本文主要介绍了AngularJs 利用百度地图API 定位当前位置 获取地址信息的方法步骤。具有一定的参考价值，下面跟着小编一起来看下吧
    2017-01-01
  • 基于angularJS的表单验证指令介绍

    基于angularJS的表单验证指令介绍

    下面小编就为大家带来一篇基于angularJS的表单验证指令介绍。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2016-10-10
  • 使用angularjs创建简单表格

    使用angularjs创建简单表格

    AngularJS提供丰富填写表单和验证。我们可以用ng-click来处理AngularJS点击按钮事件，然后使用 $dirty 和 $invalid标志做验证的方式。使用novalidate表单声明禁止任何浏览器特定的验证。下面我们来看看如何使用angularjs创建简单表格
    2016-01-01
  • AngularJs上传前预览图片的实例代码

    AngularJs上传前预览图片的实例代码

    使用AngularJs进行开发，在项目中，经常会遇到上传图片后，需在一旁预览图片内容，怎么实现这样的功能呢？今天小编给大家分享AugularJs上传前预览图片的实现代码，需要的朋友参考下吧
    2017-01-01
  • Angular2学习笔记——详解NgModule模块

    Angular2学习笔记——详解NgModule模块

    这篇文章主要介绍了Angular2学习笔记——详解NgModule模块,现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2016-12-12

最新评论