角度 js 中的 $scopes答案

【问题标题】：$scopes in angular js角度 js 中的 $scopes
【发布时间】：2016-02-09 07:18:53
【问题描述】：

我是 Angular 的初学者。我经历了角度路由教程，我对以下代码表示怀疑，其中一个控制器的 $scope 似乎被另一个控制器访问。据我所知，我们无法访问一个控制器的 $scope 数据，而另一个控制器无法访问。有人可以解释这种情况吗？并且代码在这里运行良好。

<html lang="en" ng-app="myApp">

<body>
<div ng-controller="directoryController">
    <div ng-view>

    </div>
</div>

</body>
<script src="angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0rc1/angular-route.min.js"></script>
<script>
    var app = angular.module("myApp", ['ngRoute']);
    app.config(function ($routeProvider) {
        $routeProvider
                .when('/', {templateUrl: 'directory.html'})
                .when('/view/:id', {templateUrl: 'view.html', controller: 'viewController'})
                .otherwise({redirectTo: '#'})
    });
    app.controller('directoryController', ['$scope', function ($scope) {
        //i have defined an array called data here suppose its there
        $scope.people = data;

    }]);
    app.controller('viewController', ['$scope', '$routeParams', function ($scope, $routeParams) {
        $scope.person = $scope.people[$routeParams.id]
    }]);
</script>

</html>

【问题讨论】：

标签： javascript angularjs routing

【解决方案1】：

Angular $scopes 就像一棵树，树干是 $rootScope 和其他每个 $scope 分支从那个或另一个 $scope，所以因为你的 viewController 是 directoryController 的孩子，你可以访问其中的变量。

$rootScope -> directoryController -> viewController

viewController可以访问所有父$scopes，directoryController可以访问$rootScope，$rootScope只能访问自己。

【讨论】：

【解决方案2】：

从原型上继承自父作用域的作用域。

执行摘要：

在 AngularJS 中，子作用域通常原型继承自其父作用域。该规则的一个例外是使用scope: { ... } 的指令——这会创建一个在原型上不继承的“隔离”范围。（以及带有嵌入的指令）此构造通常在创建“可重用组件”指令时使用。在指令中，默认情况下直接使用父范围，这意味着您在指令中更改的来自父范围的任何内容也将在父范围中更改。如果您设置scope:true（而不是scope: { ... }），那么原型继承将用于该指令。

-- AngularJS Wiki -- Understanding Scopes

范围层次结构

每个 Angular 应用程序只有一个根作用域，但可能有多个子作用域。

应用程序可以有多个作用域，因为某些指令会创建新的子作用域（请参阅指令文档以查看哪些指令会创建新作用域）。创建新范围时，它们将作为其父范围的子级添加。这将创建一个树结构，该树结构与它们所附加的 DOM 平行。

当 Angular 评估 {{name}} 时，它首先查看与 name 属性的给定元素关联的范围。如果没有找到这样的属性，它会搜索父作用域，依此类推，直到到达根作用域。在 JavaScript 中，这种行为称为原型继承，子作用域原型从其父作用域继承。

-- AngularJS Developer Guide -- Scope Hierarchies

【讨论】：