AngularJS JSON

by Warspawn

HTML

<div ng-app="app" ng-controller="ctrl">
     <h3>json</h3>
    <nodes data="data"></nodes>
</div>

JavaScript

angular.module('app', [])
    .controller('ctrl', function ($scope) {
    $scope.data = {
        root: 'foo',
        bar: {
            top: 'a',
            bottom: 'b'
        }
    };

    $scope.dataKeys = Object.keys($scope.data);
})
.directive('nodes', function ($templateCache) {
    var template = '<ul><li ng-repeat="key in keys"><div>{{ key }}</div><div ng-include="_nodesTemplate"></div></li></ul>';
    $templateCache.put('_nodesTemplate', template);
    
    return {
        restrict: 'EA',
        scope: {
            data: '='
        },
        replace: true,
        templateUrl: '_nodesTemplate',
        link: function(scope) {
            scope.keys = Object.keys(scope.data);
        }
    };
});