JqueryUI Accordion/Angular

Test bed for accordion and angular

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery.ui.all.css">
<script src="http://code.angularjs.org/angular-0.10.5.min.js" ng:autobind></script>
<script type="text/javascript">
// Controller.
function TestController() {
    var scope = this;
    scope.interfaceSettings = {
        testDefault: true,
        messageTypes: [{
            referenceName: "NC1",
            active: true
        }, {
            referenceName: "NC2",
            active: false
        }, {
            referenceName: "NC3",
            active: false
        }, {
            referenceName: "NC4",
            active: false
        }, {
            referenceName: "NC5",
            active: false
        }]
    };
}

/**
 * Prototypes for sortable list support.
 */
TestController.prototype = {
    initializeSortableLists: function(listElement) {
        var self = this;
        initializeSortableListFramework(self, listElement);
    }
};

/**
 * Create a directive that will register the list with the controller so
 * it can be rendered as needed.
 *
 * Return an extension injecting the renderCallback service, allowing
 * a function to be called when the element is done being rendered.
 *
 * Extend so can service can be injected.
 */
angular.directive('ei:sortablelist', function(expression, compiledElement) {
    compiledElement.addClass("eiSortableList");
    return angular.extend(function(renderCallback, elementToRender) {
        var scope = this;
        scope.initialRenderComplete = false;
        scope.initializeSortableLists(elementToRender);

        // Register in the array of sorted lists so can be rendered.
        scope.addListComponent(elementToRender, expression);

        // Define the callback to render the list.
        renderCallback(function() {
            scope.initialRenderComplete = true;
            if (scope.renderList)...

CSS

h2 {font-weight:bold;font-size:1.2em;border-bottom:solid 1px #eee;margin:5px; }
    .eiSortableList {margin-bottom:50px;}
    div.testClass {
        width:90%;margin-left: auto ;margin-right: auto ;
    }
    
    /* For the sortable list components. */
    .eiSortableListContent {
        display:none;
        background-color: red;
    }
    div .eiSortableList input[type="button"] {
        margin-bottom:8px;
    }
    div .eiSortableList .eiSortableListContent {
        background-color: red;
    }
    .addAction {
        width:auto;
        border: solid 1px blue;
    }
    
    a.removeAction {
        border: solid 1px blue;margin-top:15px;
        background-color: #eee;float:right;
        padding:1px 5px; text-decoration: none;
    }
    
    /* jQuery UI styles for the list. */
    .ui-accordion .ui-accordion-content{ overflow:hidden !important; } /* Prevent scrollbars where not needed. */