I am currently working on a directive that aims to load a webpage, make it accessible in a service, and also have its content available in the scope within the directive's element.
Here is a simplified explanation of what I am trying to achieve:
<cms-page page-id="829">
<h1>Testing</h1>
<ul ui-sortable ng-model="pageData.sections.main">
<li ng-repeat="element in pageData.CmsPage.sections.main track by $index">
<div ng-include="'/templates/cms/elements/' + element.element_type + '.html'"></div>
</li>
</ul>
<pre>{{pageData | json}}</pre>
</cms-page>
The challenge I am facing is that the {{pageData}} is not displaying. How can I create a directive that will display the existing markup and correctly parse the markup along with child directives?
Below is the code for my directive:
angular.module(cms).directive('cmsPage', ['CmsPage', 'CmsPagesService', function(CmsPage, CmsPagesService) {
return {
restrict: 'E',
transclude: true,
template: '<div ng-transclude></div>',
scope: {
pageId: '@pageId'
},
controller: function($scope) {
$scope.pageData = {};
CmsPagesService.get($scope.pageId).then(function(result) {
if (result.status == 'success') {
$scope.pageData = result.data;
} else {
throw 'Page failed to load.';
}
});
$scope.$watch('pageData', function() {
CmsPage.setPage($scope.pageData);
});
}
};
}]);