Angular.js学习笔记（五）_angularjs 定义同级 controller-优快云博客

本文链接：https://blog.youkuaiyun.com/ouyangyanlan/article/details/50204587

本文深入解析AngularJS中的作用域概念，包括根作用域、作用域与控制器、作用域与模板的关系，以及作用域的生命周期。通过示例演示如何在作用域层次中进行数据传递和生命周期操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

按照约定，我们这篇文章来具体掰扯掰扯angular的作用域 $scope的问题。 AngularJS应用最重要的部分之一就是作用域。作用域不仅提供在模型中表示的数据，还将把AngularJS应用中的所有其他组件绑定在一起，如模块、控制器、服务和模板。作用域提供绑定机制，通过这种机制，当模型数据发生变化时，DOM元素和其他代码也将更新。这就是我们曾经提到的AngularJS的一个很显著的特点，双向绑定。这与之前我们接触到的各种前端框架不同，在思维上，我们可能要一段时间来适应不去手动的操作DOM元素的变化。 1.根作用域其实作用域理解起来并不困难。当一个应用启动的时候，Angular会自动的创建一个根作用域，这个作用域是处在整个作用域链条的最顶端，我们可以理解为这里定义的变量和方法都是全局的，可以被子作用域继承和访问。根作用域用$ rootScope来表示，一般应该放在模块的run()中初始化。
Demo:

angular.module('myApp', [])
.run(function ($rootScope){
    $rootScope.rootValue = 5;
})

2.作用域和控制器
控制器是通过增强作用域来提供业务逻辑的代码。这是我们在作用域这个角度为它下的一个定义。注册的控制器在ng-controller指令连接到AngularJS模板时被实例化的。每个控制器都会有一个自己的单独的子作用域，至于在自定义指令中的$scope，是与控制器作用域同级的，和控制器作用域并没有任何的隶属关系。

3.作用域和模板
模板是用来为Angular提供视图的。在模板中定义AngularJS指令时，可以使用作用域属性和函数。在模板的表达式中也可以引用作用域中的属性。

4.作用域生命周期
创建->监视器注册->模型变化->变化观察->作用域销毁

创建阶段发生在作用域初始化时。启动应用时将创建一个根作用域，当遇到ng-controller或者ng-repeat指令时，控制器或者指令链接到模板时，将会创建子作用域。在创建阶段，将会创建一个digest循环，用于与浏览器时间循环交互。该digest循环负责使用模型的变化更新DOM元素，并执行所有已经注册的监视器函数。如果需要手动的执行digest循环，可以通过执行$digest()方法实现. 例如，下面的代码将执行所有的异步改动，然后执行作用域中的监视函数。

$scope.$digest()

我们可以用$watch()方法在作用域上注册自己的监视函数。该方法接受两个参数，一个是作用域属性的名字，一个是回调函数。

$scope.$watch('name', function(newValue, oldValue){

});

3.作用域层次问题
这里有一个来自《Angular Js开发秘籍》的Demo,简单明了。

scopeDemo.js

angular.module('myApp',[])
.controller('LevelA', function($scope){
    $scope.title = "LevelA";
    $scope.valueA = 1;
    $scope.inc = function(){
        $scope.valueA++;
    };
})
.controller('LevelB', function($scope){
    $scope.title = "LevelB";
    $scope.valueB = 1;
    $scope.inc = function(){
        $scope.valueB++;
    };
})
.controller('LevelC', function($scope){
    $scope.title = "LevelC";
    $scope.valueC = 1;
    $scope.inc = function(){
        $scope.valueC++;
    };
});

<!doctype html>
<html ng-app="myApp">
<head>
<title>AngularJS Scope</title>
</head>
<body>
<div ng-controller="LevelA">
<h3>{{h3}}</h3>
ValueA = {{valueA}}<input type="button" ng-click="inc()" value="+" />
<div ng-controller="levelB"><hr>
<h3>{{title}}</h3>
ValueA = {{valueA}}<br>
ValueB = {{valueB}}<br>
<input type="button" ng-click="inc()" value="+" />
<div ng-controller="LevelC"><hr>
<h3>{{title}}</h3>
ValueA = {{valueA}}<br>
ValueB = {{valueB}}<br>
ValueC = {{valueC}}
<input type="button" ng-click="inc()" value="+" />
</div>
</div>
</div>
<script src="angular.js"></script>
<script src="scopeDemo.js"></script>
</body>
</html>