Seeking the optimal approach for creating Angular 1 components with a CMS-driven strategy.
My goal is to develop various label templates in a component-driven, highly reusable manner, fueled by CMS content.
My plan is to utilize JSON as a component tree and gradually compile the tree using the $compile service as shown below:
angular.module('app.compile', [], function($compileProvider) {
$compileProvider.directive('compile', function($compile) {
return function(scope, element, attrs) {
scope.$watch(
function(scope) {
return scope.$eval(attrs.compile);
},
function(value) {
element.html(value);
$compile(element.contents())(scope);
}
);
};
});
});
http://plnkr.co/edit/MwUjE9l6U5wMkE89kwqY?p=preview
- Has anyone experimented with this approach and can provide feedback?
- Does this strategy seem sound? Is it considered a best practice?
- Could using the $compile service in this way potentially impact performance negatively?