使用 Batarang Chrome 扩展检查 AngularJS 范围答案

【问题标题】：Inspecting AngularJS scopes using the Batarang Chrome extension使用 Batarang Chrome 扩展检查 AngularJS 范围
【发布时间】：2014-04-12 13:21:06
【问题描述】：

我有一个关于 AngularJs 作用域的问题，尤其是使用 Batarang Chrome 扩展程序检查这些作用域的方式。

我有以下 html：

<!doctype html>
<html lang="en" ng-app="myApp">
<head>
    <meta charset="utf-8">
    <title>My AngularJS App</title>
    <link rel="stylesheet" href="css/app.css"/>
</head>
<body>

<div ng-controller="myCtrl">

    <div enhanced-textarea ng-model="name"></div>
     <div cmp>
        <h3>{{name}}</h3>
        <div notice></div>
    </div>
</div>

<script src="lib/angular/angular.js"></script>
<script src="js/directives.js"></script>
<script src="js/controllers.js"></script>
<script src="js/app.js"></script>
</body>
</html>

这里是指令：

'use strict';

angular.module('myApp.directives', [])
    .directive('cmp', function () {
        return {
            restrict: 'A',
            controller: 'cmpCtrl',
            replace: true,
            transclude: true,
            scope: {
                name: '='
            },
            template: '<div ng-transclude></div>'
        };
    })
    .controller('cmpCtrl', ['$scope', '$element', '$attrs' , function ($scope, $element, $attrs) {
        $scope.$parent.$watch('name', function (newVal) {
            if (newVal) {
                $scope.$parent.updatedSize = newVal.length;
            }
        }, true);
    }])
    .directive('enhancedTextarea', function () {
        return {
            restrict: 'A',
            replace: true,
            transclude: true,
            template: '<textarea ng-transclude></textarea>'
        };
    })
    .directive('notice', function () {
        return {
            restrict: 'A',
            require: '^cmp',
            replace: true,
            scope: {
                updatedSize: '='
            },
            template: '<div>{{size}}</div>',
            link: function ($scope, $element, $attrs, cmpCtrl) {
                $scope.$parent.$watch('updatedSize', function (newVal) {
                    if (newVal) {
                        $scope.size = newVal;
                    }
                }, true);
            }
        };
    });

和控制器：

'use strict';

angular.module('myApp.controllers', [])
  .controller('myCtrl', ['$scope', function($scope) {
        $scope.name = 'test';
  }]);

当我使用batarang检查范围时，我得出以下结论：

范围 002：ng-app
范围 003：ng-controller (myCtrl)
范围 004：????
范围 005：cmpCtrl（cmp 指令的控制器）
范围 006：cmp 内部（h3 和通知）
范围007：通知指令的链接功能
1. 以上正确吗？
2. 还有，我最大的疑问是004范围对应什么？

完整应用位于githubhere

另请参阅下面的屏幕截图：

【问题讨论】：

标签： angularjs angularjs-directive angularjs-scope batarang

【解决方案1】：

并不是每个$scope 都必须对应于您页面的一个元素。事实上，在每个 AngularJS 应用程序中都有一堆 $scopes，它们没有直接链接到任何元素。

在您的情况下，是 ng-transclude 导致创建子范围。

查看 AngularJS 的实现，它会导致创建您的 004 $scope。

if (!transcludedScope) {
    transcludedScope = scope.$new();
    transcludedScope.$$transcluded = true;
    scopeCreated = true;
}

https://github.com/angular/angular.js/blob/master/src/ng/compile.js#L959

如果您想自己深入挖掘，请在您的 AngularJS 文件中设置断点：

那就直接用调用栈，跟着兔子走吧……

【讨论】：

【解决方案2】：

我还使用此方案来调试和检查元素范围内的内容，可能会有所帮助：

您使用 chrome 开发工具检查元素
选择某个元素后，您可以通过在控制台中输入来获取其范围：

angular.element($0).scope()

你可以用同样的方法来获取控制器，只是你可以输入 controller() 而不是 scope()
为了在您的代码中设置断点并在 chrome 调试器中查看（我有时发现这比在开发工具中设置断点更容易）您可以键入：

debugger;

在您的源代码和开发工具中将停在那里，以便您看到声明的变量等。

【讨论】：