7 ms·
The idea behind it is really simple – it’s based upon CSS content property which renders controller name right where the the controller-bound tag starts. .dbg-
by mjankowski 13y ago
The idea behind it is really simple – it’s based upon CSS content property which renders controller name right where the the controller-bound tag starts.
.dbg-ctrl:before
{
content: attr(ng-controller) attr(data-ng-controller);
position:relative;
line-height: 16px;
font-size: 16px;
background-color: greenyellow;
padding:2px 6px;
}
I also added a translucent background for easily identifying controllers nesting.
.dbg-ctrl
{
border: 1px dotted crimson;
background-color: rgba(173,255,47,0.09);
padding:5px;
}
Then I’m using jQuery to dynamically add the class:
$('[ng-controller]').addClass('dbg-ctrl');
more details and a demo:
http://www.b-good.pl/2013/08/25/showing-controllers-and-includes-in-angularjs-app/ http://www.b-good.pl/2013/08/25/showing-controllers-and-incl...