added json tree directive, refactoring model tree

js/directives/jsonTree.js

@@ -0,0 +1,47 @@
+// JSON tree
+panelApp.directive('batJsonTree', function($compile) {
+  return {
+    restrict: 'E',
+    terminal: true,
+    scope: {
+      val: '=',
+      //edit: '=',
+    },
+    link: function (scope, element, attrs) {
+      // this is more complicated then it should be
+      // see: https://github.com/angular/angular.js/issues/898
+
+      //var childScope = scope.$new();
+
+
+      var buildDom = function (object) {
+        var html = '';
+        if (object == undefined) {
+          html += 'null';
+        } else if (object instanceof Array) {
+          var i;
+          html += '<div class="scope-branch">['
+          for (i = 0; i < object.length; i++) {
+            html += buildDom(object[i]) + ', ';
+          }
+          html += ']</div>'
+        } else if (object instanceof Object) {
+          for (prop in object) {
+            if (object.hasOwnProperty(prop)) {
+              html += '<div class="scope-branch">' + prop + ': ' + buildDom(object[prop]) + '</div>';
+            }
+          }
+        } else {
+          html += '<span>' + object.toString() + '</span>';
+        }
+        return html;
+      };
+
+      scope.$watch('val', function (newVal, oldVal) {
+        // TODO: clean up scopes
+        element.html(buildDom(newVal));
+        //$compile(element.contents())(scope);
+      });
+    }
+  };
+});

js/directives/modelTree.js

@@ -14,18 +14,19 @@ panelApp.directive('batModelTree', function($compile) {
       element.append(
         '<div class="scope-branch">' +
           '<a href ng-click="inspect()">Scope ({{val.id}})</a> | ' +
-          '<a href ng-click="showState = !showState">toggle</a>' +
-          '<div ng-hide="showState">' +
-            '<ul>' +
-              '<li ng-repeat="(key, item) in val.locals">' +
-                '{{key}}' +
-                '<input ng-show="item" ng-model="item" ng-change="edit()()">' +
-              '</li>' +
-            '</ul>' +
+          '<a href ng-click="hideScopes = !hideScopes">scopes</a> | ' +
+          '<a href ng-click="showModels = !showModels">models</a>' +
+
+          '<div ng-show="showModels">' +
+            '<bat-json-tree val="val.locals" ></bat-json-tree>' +
+          '</div>' +
+          
+          '<div ng-hide="hideScopes">' +
             '<div ng-repeat="child in val.children">' +
               '<bat-model-tree val="child" inspect="inspect" edit="edit"></bat-model-tree>' +
             '</div>' +
           '</div>' +
+
         '</div>');
 
       $compile(element.contents())(scope.$new());

js/services/appContext.js

@@ -95,18 +95,15 @@ panelApp.factory('appContext', function(chromeExtension) {
           // copy scope's locals
           node.locals = {};
 
-          for (var i in scope) {
-            if (i[0] !== '$' && scope.hasOwnProperty(i) && i !== 'this') {
-              if (typeof scope[i] === 'number' || typeof scope[i] === 'boolean') {
-                node.locals[i] = scope[i];
-              } else if (typeof scope[i] === 'string') {
-                node.locals[i] = '"' + scope[i] + '"';
-              } else {
-                node.locals[i] = JSON.stringify(decycle(scope[i]));
-              }
+          var scopeLocals = {};
+          for (prop in scope) {
+            if (scope.hasOwnProperty(prop) && prop !== 'this' && prop[0] !== '$') {
+              scopeLocals[prop] = scope[prop];
             }
           }
 
+          node.locals = decycle(scopeLocals);
+
           node.id = scope.$id;
           
           if (window.__ngDebug) {

panel.html

@@ -16,6 +16,7 @@
   <script src="js/panelApp.js"></script>
 
   <script src="js/directives/d3.js"></script>
+  <script src="js/directives/jsonTree.js"></script>
   <script src="js/directives/modelTree.js"></script>
   <script src="js/directives/slider.js"></script>
   <script src="js/directives/tabs.js"></script>