Sidebar Problem

An example of how to properly integrate a WYSIWYG like TinyMCE into AngularJS

by programmieraffe

HTML

<script src="http://resources.holycrap.ws/jscripts/tiny_mce/jquery.tinymce.js"></script>
<!--<script src="http://code.angularjs.org/0.10.6/angular-0.10.6.js" ng:autobind></script>-->
<script src="http://ci.angularjs.org/job/angular.js-misko/355/artifact/build/pkg/0.10.7-6b268598/angular-0.10.7-6b268598.min.js"></script>
<div ng:app>
<div ng:controller="MainCtrl">
    
    Current path: {{$location.path()}} <br />
    
    Load via URI: Organization Project Route
    
    <ng:view></ng:view>    
    

</div>
    
    <script type="text/ng-template" id="template-sidebar">
        
        hallo!
        
            <div class="sidebar" id="sidebar">
                 <ul>
                      <li class="organization" ng:repeat="organization in data.organizations" ng:click="selectOrganization(org.id)" data-organizationId='{{organization.id}}>'>{{organization.title}} (Id: {{organization.id}})
                            <ul>
                                   <li class="project" ng:repeat="project in organization.projects" data-projectId='{{project.id}}'>{{project.title}} (Id: {{project.id}})
                                        <ul>
                                                 <li class="folder" ng:repeat="folder in project.folders" data-folderId='{{folder.id}}'>{{folder.title}} (Id: {{folder.id}})</li>
                                         </ul>                   
                                   </li>
                           </ul>
                      </li> 
                </ul>
           </div>
    </script>
    

</div> <!-- eo ng:app -->

CSS

h1 { margin: 10px 0 4px; font-weight: bold; }
h2 { color: red; }
p { font-size: 80%; }
body { font-family: helvetica }
.boxes { float: left; margin-right: 10px; }
.clear { overflow: auto; }
li.organization{padding-left5px;color:red;}
li.project {padding-left:10px;color:blue;}
li.folder {padding-left:15px;color:green;}
li.active{background:yellow;}

JavaScript

function MainCtrl($location, $route, $routeParams) {
    console.log($route);
    $route.when('', {
        controller: TestCtrl,
        template: 'template-sidebar'
    });
    $route.when('/', {
        controller: TestCtrl,
        template: 'template-sidebar'
    });
    $route.when('/:module/:id/', {
        controller: TestCtrl,
        template: 'template-sidebar'
    });

}

function TestCtrl($location, $route, $routeParams,$rootScope) {
    var self = this;
    this.$location = $location;
    
    $location.path('organization/');

    console.log('TestCtrl', $routeParams);

    var json_data = {
        organizations: {
            1: {
                title: 'Organization 1',
                id: '1',
                projects: {
                    23: {
                        id: '23',
                        title: 'Project 23',
                        folders: {
                            44: {
                                id: '44',
                                'title': 'Subfolder 1'
                            }
                        }
                    },
                    28: {
                        title: 'Project 28',
                        id: '28',
                        folders: {
                            45: {
                                id: '45',
                                'title': 'Subfolder 45'
                            }
                        }
                    }
                }
            },
            12: {
                'title': 'Organization 12',
                'id': 12,
                projects: {
                    87: {
                        id: '87',
                        title: 'Project 87',
                        folders: {
                            44: {
                                id: '44',
                                'title': 'Subfolder 1'
                            }
                        }
                    }
                }
            }
        }
    };

...