详解AngularJS中的作用域  更新时间:2015年06月17日 11:15:08   投稿:goldensun   这篇文章主要介绍了详解AngularJS中的作用域,是AngularJS学习中的基础知识,需要的朋友可以参考下  范围扮演其视图连接控制器的角色一个特殊的JavaScript对象。范围包含了模型数据。在控制器,模型数据通过$scope对象访问。 以下是在上面的例子中需要考虑的重要问题。     $scope被作为第一个参数在其构造器确定指标到控制器。     $scope.message 和 $scope.type 是它们在HTML页面中所用的模型。     我们已经设置模型的值将反映应用程序模块的控制器shapeController中。     我们可以在$scope定义函数功能。 继承范围 范围是特定的控制器。如果我们定义嵌套的控制器,然后控制器子将继承其父控制的范围。 以下是在上面的例子中需要考虑的重要问题。     我们在shapeController设定模型的值。     我们覆盖的子控制器circleController消息。当“消息”内的控制器circleController的模块使用时,将用于重写的消息。 例子 下面的例子将展示上述所有指令。 testAngularJS.html Angular JS Forms AngularJS Sample Application {{message}} {{type}} {{message}} {{type}} {{message}} {{type}} 结果 在Web浏览器打开textAngularJS.html。看到结果如下。 您可能感兴趣的文章: Angularjs全局变量被作用域监听的正确姿势 详细谈谈AngularJS的子级作用域问题 关于angularJs指令的Scope(作用域)介绍 浅谈angularJS 作用域 详解JavaScript的AngularJS框架中的作用域与数据绑定 AngularJS实现单独作用域内的数据操作 AngularJS入门教程之Scope(作用域) AngularJS Controller作用域 详解angularjs中的隔离作用域理解以及绑定策略 详谈AngularJs 控制器、数据绑定、作用域 AngularJS中的作用域实例分析 AngularJS 相关文章 AngularJS入门教程之REST和定制服务详解 本文主要讲解 AngularJS REST和定制服务的知识,这里帮大家整理了相关知识,并附示例代码,详细讲解了RES和定制服务的知识,有兴趣的小伙伴可以参考下 2016-08-08 Angular 4.x中表单Reactive Forms详解 这篇文章主要介绍了Angular 4.x中表单Reactive Forms的相关资料,文中通过示例代码介绍的非常详细,相信对大家具有一定的参考价值,需要的朋友们下面来一起看看吧。 2017-04-04 详解Angular的数据显示优化处理 本文主要对Angular的数据显示优化处理进行详细介绍,具有一定的参考价值,下面跟着小编一起来看下吧 2016-12-12 AngularJS辅助库browserTrigger用法示例 这篇文章主要介绍了AngularJS辅助库browserTrigger用法,结合实例形式分析了辅助库browserTrigger的功能及单元测试中的使用技巧,需要的朋友可以参考下 2016-11-11 详解AngularJs HTTP响应拦截器实现登陆、权限校验 本篇文章主要介绍了AngularJs HTTP响应拦截器实现登陆、权限校验,具有一定的参考价值,感兴趣的小伙伴们可以参考一下。 2017-04-04 使用Angular CLI生成路由的方法 这篇文章主要介绍了使用Angular CLI生成路由的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 2018-03-03 AngularJS ng-blur 指令详解及简单实例 本文主要介绍AngularJS ng-blur 指令,这里对ng-blur 指令的知识详细介绍给大家,并给大家一个实例作为参考,有需要的小伙伴可以参考下 2016-07-07 Angular.js基础学习之初始化 这篇文章主要介绍了Angular.js基础学习之初始化的相关资料,AngularJS 启动有两种方式,一种是绑定初始化,自动加载,另外一种是手动初始化,文中介绍的很详细,需要的朋友可以参考下。 2017-03-03 AngularJS入门教程之过滤器用法示例 这篇文章主要介绍了AngularJS过滤器用法,结合实例形式简单的分析了AngularJS过滤器的功能及基本用法,并举例说明了自定义过滤器的实现技巧,需要的朋友可以参考下 2016-11-11 收藏AngularJS中最重要的核心功能 本文是小编日常收集整理的关于:AngularJS中最重要的核心功能,非常不错,具有参考借鉴价值,需要的朋友参考下吧 2017-07-07 最新评论

 范围扮演其视图连接控制器的角色一个特殊的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。看到结果如下。

2015617110218233.jpg (560×429)

您可能感兴趣的文章:

  • Angularjs全局变量被作用域监听的正确姿势
  • 详细谈谈AngularJS的子级作用域问题
  • 关于angularJs指令的Scope(作用域)介绍
  • 浅谈angularJS 作用域
  • 详解JavaScript的AngularJS框架中的作用域与数据绑定
  • AngularJS实现单独作用域内的数据操作
  • AngularJS入门教程之Scope(作用域)
  • AngularJS Controller作用域
  • 详解angularjs中的隔离作用域理解以及绑定策略
  • 详谈AngularJs 控制器、数据绑定、作用域
  • AngularJS中的作用域实例分析
张贴在3