JSFiddle - React, Tailwind, and code Playground
HTML
<div ng-app="app" ng-controller="AppCtrl">
<div dynamic-element elements="elements" ></div>
<input ng-model="test" type="text">
</div>
CSS
body {
font-family:'Arial', sans-serif;
}
blockquote::after,
blockquote::before {
content: '"';
}
JavaScript
angular.module('app', [])
.controller('AppCtrl', function ($scope) {
$scope.elements = [{
"type": "p",
"content": "Lorem Ipsum paragraph"
}, {
"type": "blockquote",
"content": "Lorem Ipsum blockquote",
"by": "Walter White"
}, {
"type": "i",
"content": "This is an italic text"
},
{
"type": "input",
"ng-model": "test",
"value": "testval"
},
];
})
.directive('dynamicElement', function() {
function link(scope, element) {
console.log(scope);
angular.forEach(scope.elements, function(value, key) {
console.log(value);
// create an element based on its type
var newElement = document.createElement(value.type);
// add the content
newElement.innerHTML = value.content;
for (attribute in value) {
console.log(attribute);
if (attribute != 'type' && attribute != 'content') {
//apply attribute
newElement.setAttribute(attribute, value[attribute]);
}
}
element.append(newElement);
});
};
return {
restrict: 'A',
scope: {
elements : '='
},
link: link
};
})
;
angular.module('app').service(
'testSvc', [
'$q',
'$log',
function($q, $log) {
'use strict';
var testSvc = this;
var testdata;
testSvc.testFunc = testFunc;
function testFunc(test) {
testdata = test
return testdata;
}
}
]
);