angular.module('app', []);
angular.module('app')
.directive('orePanel', function() {
return {
restrict: 'E',
template: [
'<div class="panel panel-info">',
' <div class="panel-heading">',
' {{panel.title}}',
' </div>',
' <div class="panel-body">',
' {{panel.text}}',
' </div>' ,
'</div>'
].join('')
};
});
angular.module('app')
.controller('MainCtrl', function($scope) {
$scope.panel = {
title: "たいとる〜",
text:"めっせーじてきすと"
};
});
<div ng-app="app" class="app-contents" >
<div ng-controller="MainCtrl">
<!-- restrict: 'E' -->
<ore-panel ></ore-panel>
</div>
</div>
<!-- AngularJS -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.7/angular.min.js" ></script>
.app-contents {
margin: 8px;
padding: 8px;
}
External resources loaded into this fiddle: