Angular: Empty Fiddle
http://angularjs.org/
HTML
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.min.js"></script>
<div ng-controller="MyCtrl">
<armcontrol label="Id" color="blue">
<input type="text" value="test" />
</armcontrol>
</div>
JavaScript
var myApp = angular.module('myApp', []);
myApp.directive('armcontrol', function() {
return {
restrict: "E",
replace : true,
transclude : true,
scope: {
label: "@",
color: "@"
},
template: "<div style='background:{{color}}' ng-transclude>{{label}}</div>"
};
})
function MyCtrl($scope) {
$scope.name = 'Superhero';
}