It seems like my code is haunted or I've made a mistake:
Here is the structure of a json feed I'm working with:
{
"sections": [
{
"identifier": "header",
"blocks": [
{
"identifier": "onebyone",
"html": "<h1>API</h1>"
},
{
"identifier": "onebyone",
"html": "<h1>API</h1>"
}
]
},
{
"identifier": "content",
"blocks": []
},
{
"identifier": "footer",
"blocks": []
}
]
}
I'm making a call in my AngularJS controller, sorting the sections, and trying to concatenate the HTML blocks, like this:
cmsApp.controller('cmsPageCtrl', function($scope, $http, $templateCache, $sce) {
$http.get("/api.php/api/page/home")
.success(
function(response) {
$scope.sections = [];
response.sections.forEach(function(el, idx, arr) {
var id = el.identifier;
$scope.sections[id] = el;
$scope.sections[id].template = 'header.html';
var template = "TEST";
el.blocks.forEach(function(el, idx, arr) {
var partial = el.html;
template = template + partial;
});
template = template + "<div><b>b</b>TEST1</div>";
console.log(id);
console.log(template);
$scope.sections[id].template = 'header.html';
$templateCache.put('header.html', $sce.trustAsHtml(template));
console.log(template);
});
}
);
});
Even though the expected output should be:
<body ng-app="cmsApp" ng-controller="cmsPageCtrl">
<ng-include src="sections.header.template"></ng-include>
</body>
It turns out to be:
<span class="ng-scope">TEST</span><div class="ng-scope"><b>b</b>TEST1</div>And the console output reveals:
cms.ctrl.js (line 33) TEST<h1>API</h1><h1>API</h1><div><b>b</b>TEST1</div>
cms.ctrl.js (line 34) TEST<h1>API</h1><h1>API</h1><div><b>b</b>TEST1</div>
cms.ctrl.js (line 39) content
cms.ctrl.js (line 33) TEST<div><b>b</b>TEST1</div>
cms.ctrl.js (line 34) TEST<div><b>b</b>TEST1</div>
cms.ctrl.js (line 39) footer
cms.ctrl.js (line 33) TEST<div><b>b</b>TEST1</div>
cms.ctrl.js (line 34) TEST<div><b>b</b>TEST1</div>
cms.ctrl.js (line 39)
Why is the HTML being stripped from the header section output?