使用Batarang Chrome扩展程序检查AngularJS范围
bal*_*teo 8 angularjs angularjs-directive angularjs-scope batarang
我有一个关于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:通知指令的链接功能
- 以上是正确的吗？
- 另外,我最大的询问是004范围对应的是什么？
完整的应用程序位于github 这里
另请参见下面的屏幕截图:
并不是每个人$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文件中设置断点:
然后只需使用调用堆栈并按照兔子...
| 归档时间： |
|
| 查看次数： |
4456 次 |
| 最近记录： |