AngularJS作用域的多重继承

最新推荐文章于 2024-09-11 15:33:18 发布

iteye_2698

最新推荐文章于 2024-09-11 15:33:18 发布

阅读量122

点赞数

文章标签： javascript ViewUI

本文链接：https://blog.csdn.net/iteye_2698/article/details/82618601

版权

<!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

写在这里给大家分享下。

同时，自己记录笔记。