`
西南吹风
  • 浏览: 8872 次
文章分类
社区版块
存档分类
最新评论

AngularJS作用域的多重继承

 
阅读更多

 

<!doctype html>
<html ng-app="myApp">
<head>
<script src="http://cdn.bootcss.com/angular.js/1.3.12/angular.min.js"></script>
<script src="http://cdn.bootcss.com/angular-i18n/1.2.15/angular-locale_zh-cn.js"></script>  <style>
    #parentCtrl {
      background-color: yellow;
      padding: 10px;
    }
    #childCtrl {
      background-color: green;
      padding: 10px;
    }
  </style>
</head>
<body>

  <p>We can access: {{ rootProperty }}</p>
  <div id="parentCtrl" ng-controller="ParentCtrl">
    <p>We can access: {{ rootProperty }} and {{ parentProperty }}</p>
    <div id="childCtrl" ng-controller="ChildCtrl">
      <p>
        We can access:
        {{ rootProperty }} and
        {{ parentProperty }} and
        {{ childProperty }}
      </p>
      <p>{{ fullSentenceFromChild }}</p>
    </div>
  </div>

  <script>
    angular.module('myApp', [])
    .run(function($rootScope) {
      // use .run to access $rootScope
      $rootScope.rootProperty = 'root scope';
    })
    .controller('ParentCtrl', function($scope) {
      // use .controller to access properties inside `ng-controller`
      // in the DOM omit $scope, it is inferred based on the current controller
      $scope.parentProperty = 'parent scope';
    })
    .controller('ChildCtrl', function($scope) {
      $scope.childProperty = 'child scope';
      // just like in the DOM, we can access any of the properties in the
      // prototype chain directly from the current $scope
      $scope.fullSentenceFromChild = 'Same $scope: We can access: ' +
                                     $scope.rootProperty + ' and ' +
                                     $scope.parentProperty + ' and ' +
                                     $scope.childProperty
    });
  </script>

</body>
</html>

 

ng参数继承机制比较好玩,最近正在学习。

此段代码来自于《AngularJS权威教程》P50.

网上有链接:http://jsbin.com/zahojaleme/1/edit

写在这里给大家分享下。

同时,自己记录笔记。

 

分享到:
评论

相关推荐

    AngularJS Controller作用域.docx

    AngularJS Controller作用域.docx

    浅谈angularJS 作用域

    主要介绍了浅谈angularJS 作用域的相关资料,需要的朋友可以参考下

    AngularJS 作用域详解及示例代码

    本文主要介绍AngularJS 作用域的知识,这里整理了基础资料,和示例代码以及实现效果图,有需要的小伙伴可以参考下

    AngularJS 0005:作用域

    文章:http://blog.csdn.net/yysyangyangyangshan/article/details/53425956

    AngularJS入门教程之Scope(作用域)

    AngularJS Scope(作用域) Scope(作用域) 是应用在 HTML (视图) 和 JavaScript (控制器)之间的纽带。 Scope 是一个对象,有可用的方法和属性。 Scope 可应用在视图和控制器上。 如何使用 Scope 当你在 AngularJS...

    详细谈谈AngularJS的子级作用域问题

    这样的原因是因为,这些指令虽然是AngularJS内部定义的,但是也是和directive实现的方法都是一样的,其内部使用的是scope:true的方式,子作用域继承了父级的作用,并且构建了一个独立的子作用域,所有双向绑定实现不...

    函数的全局和局部作用域和变量-作用域.html

    // 全局作用域:在script之间或者一个独立的js文件 script之间或者一个独立的js文件里的内容区域,在全局作用域中定义的作用域 全局作用域。 在任何位置都可以访问 // 局部变量:在函数作用域之间里的一个或者...

    详解angular中的作用域及继承

    本篇文章主要介绍了详解angular中的作用域及继承,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

    关于angularJs指令的Scope(作用域)介绍

    每当一个指令被创建的时候,都会有这样一个选择,是继承自己的父作用域(一般是外部的Controller提供的作用域或者根作用域($rootScope)),还是创建一个新的自己的作用域,当然AngularJS为我们指令的scope参数提供...

    在块级作用域内声明函数

    关于ES6中let 和 const 命令的用法以及注意事项:中的报错的样式ES6 引入了块级作用域,明确允许在块级作用域之中声明函数。ES6 规定,块级作用域之中,函数声明语句的行为类似于let,在块级作用域之外不可引用。

    AngularJS Controller作用域

    主要为大家详细介绍了AngularJS Controller的作用域,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

    Python语言基础:作用域.pptx

    作用域作用域作用域的查找顺序新作用域的引入目录Contents01作用域作用域作用域就是一个 Python 程序可以直接访问命名空间的正文区域。Python 中,变量的访问权限决定于这个变量是在哪里赋值的。变量的作用域决定了...

    详解JavaScript的AngularJS框架中的作用域与数据绑定_.docx

    详解JavaScript的AngularJS框架中的作用域与数据绑定_.docx

    作用域的定义及应用

    本文章是关于作用域的定义及应用。

    AngularJS中的作用域实例分析

    主要介绍了AngularJS中的作用域,结合实例形式较为详细的分析了AngularJS涉及作用域的相关问题与注意事项,需要的朋友可以参考下

    深入理解变量作用域

    比如对作用域来说。 大家都知道一个变量的作用域(scope)是程序中定义这个变量的区域。全局(global)变量的作用域是全局性的,在javascript中,它的存在都有定义。而在函数之内声明的变量,就只在函数体内部有定义。...

    java内置对象作用域

    java内置对象作用域java内置对象作用域java内置对象作用域java内置对象作用域

    AngularJS Scope(作用域)

    AngularJS Scope(作用域) Scope(作用域) 是应用在 HTML (视图) 和 JavaScript (控制器)之间的纽带。 Scope 是一个对象,有可用的方法和属性。 Scope 可应用在视图和控制器上。 如何使用 Scope 当你在 AngularJS ...

Global site tag (gtag.js) - Google Analytics