gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-04 07:22:50 25 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/

    25 4 0
    Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
    广告合作:1813099741@qq.com 6ren.com