Angular directive with dynamic content - angularjs

Question

I have created an accordion toggle for ionic angular in this punkr.
What i intend to achieve is to translate it to an directive that can be used as follow, where the content is dynamic based on the html that user insert. It could be a form, a text or simply a button. How could it be done??
<custom-accordion title="Header 1">
Content 1
</custom-accordion>
<custom-accordion title="Header 2">
Text: <input type="text" style="background: grey;" /><br>
Number: <input type="number" style="background: grey;" /><br>
</custom-accordion>

Answer 1

You can create a directive for the accordion and then load the content dynamically based on a scope variable. You might have to create separate HTML files for the content that you desire. Here is a plunkr for the same.
Directive
angular.module('starter.directives', [])
.directive("dynamicAccordion", function() {
return {
restrict:"A/E",
scope: {
content: "#"
},
template:"<div ng-include=getContent()></div>",
link: function(scope) {
scope.getContent = function() {
return scope.content;
},
scope.toggleContent = function() {
scope.isShow = !scope.isShow;
},
scope.isShow = true;
}
}
});
HTML
<ion-view title="Dashboard">
<ion-content class="has-header padding">
<dynamic-accordion content="accordionbutton.html"></dynamic-accordion>
<dynamic-accordion content="accordionform.html"></dynamic-accordion>
</ion-content>
</ion-view>
EDIT
This plunkr exposes the model from each form to the controller.
Directive
angular.module('starter.directives', [])
.directive("dynamicAccordion", function() {
return {
restrict:"A/E",
scope: {
content: "#",
model: "="
},
template:"<div ng-include=getContent()></div>",
link: function(scope) {
scope.getContent = function() {
return scope.content;
},
scope.toggleContent = function() {
scope.isShow = !scope.isShow;
},
scope.isShow = true;
}
}
});
HTML
<form>
{{ form | json }}
<dynamic-accordion content="accordionbutton.html" model="model1"></dynamic-accordion>
<dynamic-accordion content="accordionform.html" model="model2"></dynamic-accordion>
</form>
<button ng-click="checkModel()">Check Model</button>
Controller
$scope.model1 = {
text: "Default - 1",
number: 0
};
$scope.model2 = {
text: "Default - 2",
number: 0
};
$scope.checkModel = function() {
console.log("Text_1 "+$scope.model1.text +" Number_1 "+$scope.model1.number);
console.log("Text_2 "+$scope.model2.text +" Number_2 "+$scope.model2.number);
}