个人中心
gpt4 book ai didi

angularjs - 使用 Batarang Chrome 扩展检查 AngularJS 范围

转载 作者：行者123 更新时间：2023-12-04 07:22:50 26 4
gpt4 key购买 nike

我有一个关于 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);
            }
        };
    });

和 Controller : 
'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 指令的 Controller )
  • 范围 006:cmp 内部(h3 和通知)
  • 范围007:通知指令的链接功能
  • 以上正确吗？
  • 还有，我最大的审讯是 004范围对应什么？

    • 完整的应用程序位于 github here

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

    screen capture

    最佳答案

    不是每个$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

    然后只需使用调用堆栈并跟随兔子......

    关于angularjs - 使用 Batarang Chrome 扩展检查 AngularJS 范围，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22283227/

    26 4 0
    文章推荐： expression-trees - Roslyn:表达式和 SytnaxTree
    文章推荐： python - Numpy:在没有循环的情况下获取索引中的最小值？
    文章推荐： android - 如何知道用户是否使用了 Google Play 结算库的免费试用版？
    文章推荐： Django zinnia 禁用评论或使用替代方案
    行者123
    个人简介

    我是一名优秀的程序员,十分优秀！

    滴滴打车优惠券免费领取
    滴滴打车优惠券
    全站热门文章
    Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
    广告合作:1813099741@qq.com 6ren.com