使用Batarang扩展检查AngularJS范围
使用Batarang扩展检查AngularJS范围
提问于 2014-03-09 14:10:39
我有一个关于AngularJs范围的问题，特别是如何使用Batarang扩展来检查这些范围。
我有下面的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';
}]);当我使用检查范围时，我得出了以下结论：
- 范围002: ng-app
- 范围003: ng-控制器(myCtrl)
- 范围004：？
- 范围005: cmpCtrl ( cmp指令控制器)
- 范围006：“议定书”/“公约”缔约方会议内部(h3和通知)
- 范围007:通知指令的链接功能
1. **Is the above correct?**
2. Also, my biggest interrogation is **what does the 004 scope correspond to?**
完整的应用程序位于github 这里上
另见以下屏幕截图：
回答 2
Stack Overflow用户
回答已采纳
发布于 2014-03-09 21:55:39
并不是每个$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文件中设置一个断点：
然后用呼叫堆栈跟着兔子..。
Stack Overflow用户
发布于 2016-05-02 12:10:51
我还使用这个场景来调试和检查元素范围中的内容，可能会有帮助：
- 您可以使用chrome工具检查元素。
- 一旦选择了某些元素，就可以通过输入控制台获得它的作用域：
angular.element($0).scope()
- 您可以以相同的方式获得控制器，而不是scope()，您可以键入控制器()
- 为了在代码中设置断点，并在chrome调试器中查看(我有时发现这比在dev工具中设置断点容易)，您可以键入：
debugger;
在您的源代码和开发工具将停止在那里，以便您看到声明的vars等。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/22283227
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号