AngularJS 作用域详解及示例代码
更新时间：2016年08月17日 15:08:30 作者：yak
本文主要介绍AngularJS 作用域的知识，这里整理了基础资料，和示例代码以及实现效果图，有需要的小伙伴可以参考下
范围扮演其视图连接控制器的角色一个特殊的JavaScript对象。范围包含了模型数据。在控制器，模型数据通过$scope对象访问。
<script>
var mainApp = angular.module("mainApp", []);
mainApp.controller("shapeController", function($scope) {
$scope.message = "In shape controller";
$scope.type = "Shape";
});
</script>
以下是在上面的例子中需要考虑的重要问题。
$scope被作为第一个参数在其构造器确定指标到控制器。
$scope.message 和 $scope.type 是它们在HTML页面中所用的模型。
我们已经设置模型的值将反映应用程序模块的控制器shapeController中。
我们可以在$scope定义函数功能。
继承范围
范围是特定的控制器。如果我们定义嵌套的控制器，然后控制器子将继承其父控制的范围。
<script>
var mainApp = angular.module("mainApp", []);
mainApp.controller("shapeController", function($scope) {
$scope.message = "In shape controller";
$scope.type = "Shape";
});
mainApp.controller("circleController", function($scope) {
$scope.message = "In circle controller";
});
</script>
以下是在上面的例子中需要考虑的重要问题。
我们在shapeController设定模型的值。
我们覆盖的子控制器circleController消息。当“消息”内的控制器circleController的模块使用时，将用于重写的消息。
例子
下面的例子将展示上述所有指令。
testAngularJS.html
<html>
<head>
<title>Angular JS Forms</title>
</head>
<body>
<h2>AngularJS Sample Application</h2>
<div ng-app="mainApp" ng-controller="shapeController">
<p>{{message}} <br/> {{type}} </p>
<div ng-controller="circleController">
<p>{{message}} <br/> {{type}} </p>
</div>
<div ng-controller="squareController">
<p>{{message}} <br/> {{type}} </p>
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
<script>
var mainApp = angular.module("mainApp", []);
mainApp.controller("shapeController", function($scope) {
$scope.message = "In shape controller";
$scope.type = "Shape";
});
mainApp.controller("circleController", function($scope) {
$scope.message = "In circle controller";
});
mainApp.controller("squareController", function($scope) {
$scope.message = "In square controller";
$scope.type = "Square";
});
</script>
</body>
</html>
结果
在Web浏览器打开textAngularJS.html。看到结果如下。
以上就是对AngularJS 作用域的资料整理，后续继续补充相关资料，谢谢大家对本站的支持！
相关文章
在我们开发中经常需要在页面显示给用户的信息需要一定处理格式化，才能显示给用户。在angularjs中为我们提供了叫filter的指令，让我们能够很轻易就能做到着一些列的功能，angularjs内部为我们提供了number等很多内置的filter。2015-05-05
众所周知AngularJS的双向绑定在表单应用中强大又方便，但是偶尔会遇到需要解除对象变量的双向绑定。Angular提供的angular.copy的方法可以实现解除双向绑定。所以这篇文章就来给大家详细的介绍下angular.copy，有需要的朋友们可以参考借鉴，下面来一起看看吧。2016-11-11
这篇文章主要为大家介绍了angularjs实现多选框分段全选效果实现详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-06-06
这篇文章主要为大家详细介绍了Angular模板表单校验方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-08-08
AngularJS通过ng-Img-Crop实现头像截取的示例
本篇文章主要介绍了AngularJS通过ng-Img-Crop实现头像截取的示例，具有一定的参考价值，有兴趣的可以了解一下2017-08-08
anime.js是一个灵活的轻型JavaScript动画库。这篇文章主要介绍了anime.js 实现带有描边动画效果的复选框 ,需要的朋友可以参考下2017-12-12
详解AngularJS通过ocLazyLoad实现动态（懒）加载模块和依赖
本篇文章主要介绍了详解AngularJS通过ocLazyLoad实现动态（懒）加载模块和依赖 ，具有一定的参考价值，感兴趣的小伙伴们可以参考一下。2017-03-03
这篇文章主要介绍了Angular实现form自动布局的相关资料，以代码片段的形式分析了Angular实现form自动布局的实现方法，感兴趣的小伙伴们可以参考一下2016-01-01
本篇文章主要介绍了深入理解angular2启动步骤 ，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-07-07
这篇文章主要介绍了Angularjs按需查询实例代码,需要的朋友可以参考下2017-10-10
最新评论