angular.module('app', []);
angular.module('app')
.directive('orePanel', function() {
return {
restrict: 'E',
scope: {
'data': '=',
'clicked': '&'
},
template: [
'<div class="panel panel-info">',
' <div class="panel-heading">',
' {{data.title}}',
' </div>',
' <div class="panel-body">',
' <input type="text" ng-model="sendMsg" /> ',
' <button ng-click="clicked({ msg: sendMsg})" >' ,
' click!',
' </button>',
' </div>' ,
'</div>'
].join('')
};
});
angular.module('app')
.controller('MainCtrl', function($scope) {
$scope.panel = {
title: "たいとる〜",
text:"めっせーじてきすと"
};
$scope.panelClicked = function(msg) {
$scope.msg = msg;
};
});
<div ng-app="app" class="app-contents" >
<div ng-controller="MainCtrl">
<!-- restrict: 'E' -->
<ore-panel
data="panel"
clicked="panelClicked(msg)"
></ore-panel>
<span>msg={{msg}}</span>
</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: