求知 文章 文库 Lib 视频 Code iProcess 课程 认证 咨询 工具 火云堂 讲座吧   成长之路  
会员   
要资料
 
追随技术信仰

随时听讲座
每天看新闻
 
 

AngularJS教程
AngularJS快速入门
AngularJS环境设置
AngularJS MVC体系结构
AngularJS第一个应用程序
AngularJS指令
AngularJS表达式
AngularJS控制器
AngularJS过滤器
AngularJS表格
AngularJS HTML DOM
AngularJS模块
AngularJS表单
AngularJS包括
AngularJS Ajax
AngularJS视
AngularJS作用域
AngularJS服务
AngularJS依赖注入
AngularJS自定义指令
AngularJS国际化
 
 

AngularJS作用域
106 次浏览
27次
 捐助

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


您可以捐助,支持我们的公益事业。

1元 10元 50元





认证码: 验证码,看不清楚?请点击刷新验证码 必填



106 次浏览
27次
 捐助
 

每天2个文档/视频
扫描微信二维码订阅
订阅技术月刊
获得每月300个技术资源
 
 

关于我们 | 联系我们 | 京ICP备10020922号 京公海网安备110108001071号