Угловая директива с динамическим контентом

Question

Я создал аккордеонный переключатель для ионного углового в this punkr.

То, что я намереваюсь достичь, - это перевести его в директиву, которая может использоваться следующим образом, где контент является динамическим на основе html, который пользователь вставляет. Это может быть форма, текст или просто кнопка. Как это можно сделать?

<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

Вы можете создать директиву для аккордеона, а затем динамически загрузить контент на основе переменной области. Возможно, вам придется создавать отдельные файлы HTML для желаемого контента. Вот для этого plunkr.

Директива

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

РЕДАКТИРОВАТЬ
Это plunkr выставляет модель из каждой формы к контроллеру.
Директива

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> 

Контроллер

$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); 
     }