Add labels to the scope items

rev087 · Apr 29, 2014 · 8914386 · 8914386
1 parent cd5c7ce
commit 8914386
Show file tree

Hide file tree

Showing 2 changed files with 74 additions and 8 deletions.
diff --git a/ng-inspector.js b/ng-inspector.js
@@ -110,12 +110,13 @@
 		return this;
 	}
 
-	var ScopeItem = function(scope, depth) {
+	var ScopeItem = function(scope, module, depth) {
 
 		if ( typeof depth === 'undefined' || isNaN(depth) )
 			depth = 0;
 
 		this.scope = scope;
+		this.module = module;
 		this.depth = depth;
 
 		this.element = document.createElement('div');
@@ -140,6 +141,54 @@
 			}
 		}
 
+		this.addAssociation = function(text, isMinor) {
+			var span = document.createElement('span');
+			span.className = 'ngi-association';
+			span.innerText = text;
+			if (isMinor) span.classList.add('ngi-minor');
+			this.label.appendChild(span);
+		};
+
+		// Find the scope's controller(s) and/or directive(s)
+		if (this.module) {
+			for (var i = 0; i < this.module._invokeQueue.length; i++) {
+				var invoke = this.module._invokeQueue[i];
+				var provider = invoke[0];
+				var name = invoke[2][0];
+				switch (provider) {
+					case '$controllerProvider':
+						var els = document.querySelectorAll('[ng-controller='+name+']');
+						for ( var i = 0; i < els.length; i++ ) {
+							var el = angular.element(els.item(i));
+							if ( el.scope().$id === this.scope.$id ) {
+								this.addAssociation(name);
+							}
+						}
+						break;
+					case '$compileProvider':
+						var attrib = name.replace(/([a-z\d])([A-Z])/g, '$1-$2').toLowerCase();
+						var els = document.querySelectorAll('['+attrib+']');
+						for ( var i = 0; i < els.length; i++ ) {
+							var el = angular.element(els.item(i));
+							if ( el.scope().$id === this.scope.$id ) {
+								this.addAssociation(name);
+							}
+						}
+						break;
+				}
+			}
+		}
+
+		// Label ng-repeat items
+		if (this.node.getAttribute('ng-repeat')) {
+			this.addAssociation('ngRepeat', true);
+		}
+
+		// Label root scopes
+		if (this.scope.$root.$id === this.scope.$id) {
+			this.addAssociation('$rootScope', true);
+		}
+
 		// Models
 		/////////
 
@@ -192,7 +241,7 @@
 			var childScope = this.scope.$$childHead;
 
 			do {
-				var childItem = new ScopeItem(childScope, this.depth + 1);
+				var childItem = new ScopeItem(childScope, this.module, this.depth + 1);
 				this.drawer.appendChild(childItem.element);
 			} while (childScope = childScope.$$nextSibling);
 		};
@@ -249,7 +298,7 @@
 				for (var i = 0; i < newChildScopes.length; i++) {
 					var added = scopeItem.oldChildScopes.indexOf(newChildScopes[i]) < 0;
 					if ( added ) {
-						var childItem = new ScopeItem(newChildScopes[i], scopeItem.depth + 1);
+						var childItem = new ScopeItem(newChildScopes[i], scopeItem.module, scopeItem.depth + 1);
 						scopeItem.drawer.appendChild(childItem.element);
 					}
 				}
@@ -274,10 +323,18 @@
 	var AppItem = function(node, inspector) {
 
 		this.node = node;
-		this.name = node.getAttribute('ng-app') ?
-			node.getAttribute('ng-app') : 'ng-app';
 		this.scope = angular.element(node).scope();
 
+		// Find the module
+		this.module = null;
+		this.name = null;
+		if (node.getAttribute('ng-app')) {
+			this.name = node.getAttribute('ng-app');
+			this.module = angular.module(this.name);
+		} else {
+			this.name = 'ng-app';
+		}
+
 		this.element = document.createElement('div');
 		this.element.className = 'ngi-app';
 		this.element.innerHTML = '<label>' + this.name + '</label>';
@@ -288,7 +345,7 @@
 
 		// Set the root scope
 		$scope = angular.element(this.node).scope();
-		this.rootScopeItem = new ScopeItem($scope);
+		this.rootScopeItem = new ScopeItem($scope, this.module);
 		this.drawer.appendChild(this.rootScopeItem.element);
 
 		this.destroy = function() {

diff --git a/stylesheet.css b/stylesheet.css
@@ -1,11 +1,11 @@
 .ngi-highlight,
 .ngi-highlight .ng-scope {
 	border: 1px solid #53A0FD !important;
-	box-shadow: 0px 0px 4px #53A0FD !important;
+	box-shadow: inset 0px 0px 4px #53A0FD !important;
 }
 .ngi-highlight .ng-binding {
 	border: 1px solid red !important;
-	box-shadow: 0px 0px 4px red !important;
+	box-shadow: inset 0px 0px 4px red !important;
 }
 
 .ngi-inspector * {
@@ -98,6 +98,15 @@
 	border-bottom: 1px solid #4881C6;
 }
 
+.ngi-scope .ngi-association {
+	padding-left: 5px;
+	font-weight: bold;
+}
+.ngi-scope .ngi-association.ngi-minor {
+	color: rgba(0, 0, 0, .4);
+	font-weight: normal;
+}
+
 .ngi-model > label {
 	padding: 0 5px 0 24px;
 	background: #fff url(icons/model.png) no-repeat 4px 7px;