I have a JSON Service that will return JSON content, such as the following:
{
"page":"1",
"content":"<a href='#' ng-click='goToPage(135)'>Link to page 135</a>"
}
Now, what I do with that content is that I replace it in my page and that part is actually working.
What I have in my html page :
<div id="storyContent" ng-bind-html="content">
However, when the content is replaced, the events are not bound to my angularJS function. Here's my angularJS code:
var castleDeathApp = angular.module('castleDeathApp', ['ngRoute', 'ngSanitize']);
castleDeathApp.controller('PageCtrl', function ($scope, $http, $sce) {
currentPage = localStorage.getItem('currentPage');
$scope.title = 'Page '+currentPage;
$http({
url: "/Service/Page/1",
method: "GET"
}).success(function(data, status, headers, config) {
$scope.content = $sce.trustAsHtml(data.content);
});
$scope.goToPage = function(pageNumber) {
alert(pageNumber);
localStorage.setItem('currentPage', pageNumber)
$http({
url: "/Service/Page/"+pageNumber,
method: "GET"
}).success(function(data, status, headers, config) {
$scope.content = data.content;
});
}
});
I'm pretty sure I have to tell AngularJS that I wan't the arriving data (from the http call) to be bound to the controller.
Update 1:
I header using $compile, does someone know how this would integrate in my code ?