AngularJs作用域

最新推荐文章于 2020-03-31 14:03:19 发布

约德尔蒙

最新推荐文章于 2020-03-31 14:03:19 发布

阅读量267

点赞数

分类专栏： AngularJs

本文链接：https://blog.csdn.net/gyq04551/article/details/55223174

版权

AngularJs 专栏收录该内容

34 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>AnaularJs作用域</title>
</head>
<!--  
    #控制器嵌套:  
        通常AngularJS中应用（App）是由若干个视图（View）组合成而成的，  
        而视图（View）又都是HTML元素，并且HTML元素是可以互相嵌套的，  
        另一方面视图都隶属于某个控制器（Controller），进而控制器之间也必然会产生嵌套关系。  
          
    #作用域 :  
        每个控制器（Controller）又都对应一个模型（Model）也就是$scope对象，  
        不同层级控制器（Controller）下的$scope便产生了作用域。  
          
    #作用域范围:  
        根作用域:  
            一个AngularJS的应用（App）在启动时会自动创建一个根作用域$rootScope，  
            这个根作用域在整个应用范围（ng-app所在标签以内）都是可以被访问到的.  
        子作用域:  
            通过ng-controller指令可以创建一个子作用域，新建的作用域可以访问其父作用域的数据。  
-->  
<body ng-app="App" ng-init="name='爷'">  
      
    <div class="box" ng-controller="ParentController">  
        <nav>  
            <a href="javascript:;">首页</a>  
            <a href="javascript:;">列表</a>  
        </nav>  
  
        <div class="main" ng-controller="ChildController">  
            <h4>{{name}}</h4>  
        </div>  
    </div>  
  
    <script src="../libs/angular.min.js"></script>  
    <script>  
          
        var App = angular.module('App', []);  
  		
        App.controller('ParentController', ['$scope', function ($scope) {  
            $scope.name = '爸';  
        }]);  
  			
        App.controller('ChildController', ['$scope', function ($scope) {  
             $scope.name = '儿';  
        }]);  
  
    </script>  
      
</body>  
</html>