Geek Answers Handbook

Checking AngularJS Areas Using the Batarang Chrome Extension

I have a question about AngularJs clouds and especially about how they can be tested with the Chrome Batarang extension.

I have the following 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>

Here are the directives :

 '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); } }; });

and controller :

 'use strict'; angular.module('myApp.controllers', []) .controller('myCtrl', ['$scope', function($scope) { $scope.name = 'test'; }]);

When I check areas using batarang , I come to the following conclusion :

  • Scope 002: ng-app
  • Scope 003: ng-controller (myCtrl)
  • Area 004: <? >
  • Scope 005: cmpCtrl (controller for cmp directive)
  • Region 006: inside cmp (h3 and notification)

  • Area 007: notification directive link function

    • Is it right?
    • Also, my biggest poll is what corresponds to area 004?

The full app is located on github here

See also screenshot below:

screen capture

+7
angularjs angularjs-scope angularjs-directive batarang
source share
2 answers

This does not mean that every $scope should correspond to an element of your page. In fact, every AngularJS application has a bunch of $scopes that are not directly related to any element.

In your case, this is ng-transclude , which is why a ng-transclude region is created.

Take a look at the AngularJS implementation that causes the creation of your 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

If you like to dig deeper, go and set a breakpoint right here in your AngularJS file:

enter image description here

Then just use the call stack and follow the rabbit ...

+8
source share

I also use this script to debug and check what goes into the scope of an element, it can be useful:

  • You test an element using the chrome dev tools.
  • After selecting a specific item, you can get your volume by typing the console:

angular.element($0).scope()

  • You can get the controller in the same way as instead of scope (), you can enter the controller ()

  • To set a breakpoint in your code and look at the chrome debugger (sometimes it’s easier for me than setting a breakpoint in dev tools), you can enter:

debugger;

in your source and the dev tool will stop there to see the declared vars, etc.

0
source share

More articles:


All Articles