angularjs labeled component

with directive

by jer2

HTML

<script src="http://code.angularjs.org/1.0.0/angular-1.0.0.min.js"></script>
<div ng-app="myModule">
    <script type="text/ng-template" id="template.html">
        <div><label>{{title}}</label><span class="body" ng-transclude></span></div>
    </script>

    <div ng-controller="MyCtrl">
        <div  ng-repeat="info in data.infos">
            <labeled-component title="{{info.value1}}">
                <textarea ng-model="info.value2" rows="3" cols="80" n style="height:100px;"></textarea>
            </labeled-component>
            

            <labeled-component-test title="{{info.value1}}">
                <textarea ng-model="info.value2" rows="3" cols="80" n style="height:100px;"></textarea>
            </labeled-component-test>            

        <div>
    </div>    
</div>

CSS

/*
 * jQuery UI CSS Framework 1.8.16
 *
 * Copyright 2011, AUTHORS.txt (http://jqueryui.com/about)
 * Dual licensed under the MIT or GPL Version 2 licenses.
 * http://jquery.org/license
 *
 * http://docs.jquery.com/UI/Theming/API
 */

/* Layout helpers
----------------------------------*/
.ui-helper-hidden { display: none; }
.ui-helper-hidden-accessible { position: absolute !important; clip: rect(1px 1px 1px 1px); clip: rect(1px,1px,1px,1px); }
.ui-helper-reset { margin: 0; padding: 0; border: 0; outline: 0; line-height: 1.3; text-decoration: none; font-size: 100%; list-style: none; }
.ui-helper-clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
.ui-helper-clearfix { display: inline-block; }
/* required comment for clearfix to work in Opera \*/
* html .ui-helper-clearfix { height:1%; }
.ui-helper-clearfix { display:block; }
/* end clearfix */
.ui-helper-zfix { width: 100%; height: 100%; top: 0; left: 0; position: absolute; opacity: 0; filter:Alpha(Opacity=0); }


/* Interaction Cues
----------------------------------*/
.ui-state-disabled { cursor: default !important; }


/* Icons
----------------------------------*/

/* states and images */
.ui-icon { display: block; text-indent: -99999px; overflow: hidden; background-repeat: no-repeat; }


/* Misc visuals
----------------------------------*/

/* Overlays */
.ui-widget-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }


/*
 * jQuery UI CSS Framework 1.8.16
 *
 * Copyright 2011, AUTHORS.txt (http://jqueryui.com/about)
 * Dual licensed under the MIT or GPL Version 2 licenses.
 * http://jquery.org/license
 *
 * http://docs.jquery.com/UI/Theming/API
 *
 * To view and modify this theme, visit...

JavaScript

var directivesModule = angular.module('myModule', []);

directivesModule.directive('labeledComponent', function() {
    return {
        restrict: 'EAC',
        replace: true,
        transclude: true,
        scope: {
            title: '@title'
        },
        template: '<div><label>{{title}}:</label><span class="body" ng-transclude></span></div>'
    };
});

directivesModule.directive('labeledComponentTest', function() {
    return {
        restrict: 'EAC',
        replace: true,
        transclude: true,
        scope: {
            title: '@title'
        },
        templateUrl: 'template.html'             
    };
});


function MyCtrl($scope) {

    $scope.data = {
        "infos": [{
            "value1": "value1_1",
            "value2": "value2_1"},
        {
            "value1": "value1_2",
            "value2": "value2_2"}]
    };

}
MyCtrl.$inject = ['$scope'];