Question

我对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范围对应的是什么？

完整应用位于github here

另见下面的屏幕截图：

screen capture

Answer 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文件中设置断点：

enter image description here

然后只需使用调用堆栈并按照兔子......

Answer 2

我也使用这个场景来调试和检查元素范围内的内容，可能会有所帮助：

使用chrome dev工具检查元素
选择某个元素后，您可以通过键入console来获取其范围：

angular.element($0).scope()

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

debugger;

你的源码和开发工具中的

将停在那里，所以你会看到声明的变量等。

使用Batarang Chrome扩展程序检查AngularJS范围

2 个答案: