I'm currently working on a directive that needs to reload its content automatically. Unfortunately, I haven't had much success with it so far. Any assistance would be greatly appreciated.
UPDATE: I attempted the suggested solution but encountered a $digestx10 error. It seems like the problem persists.
Although everything is functioning correctly and the data is being saved properly, the DOM refuses to refresh.
angular.module('mymodule').directive('chatContent',
["$compile",'localStorageService','loginService','peopleOnlineService',
function($compile, localStorageService, loginService, peopleOnlineService) {
var LoadData = function (data, userId) {
var template = '';
if(localStorageService.IsUser(userId) === true){
template = '<div class="feedItemChat"><div class="chatItem"><div class="chatMessage userChatMessage">{{content.chatMessage}}</div></div></div>';
}else{
template = '<div class="feedItemChat"><div class="chatItem"><div class="chatMessage otherChatMessage">{{content.chatMessage}}</div></div></div>';
}
return template;
};
var linker = function (scope, element) {
var data = localStorageService.LoadDataLocal(localStorageService.CheckCorrectRoom(loginService.GetUser().userId, peopleOnlineService.GetParams().userId));
scope.$watch(data, function(){
element.html(LoadData(data,scope.content.userId)).show();
$compile(element.contents())(scope);
});
};
return {
restrict: 'E',
link: linker,
scope: {
content: '='
}
};
}]);
I'm also curious about how one could incorporate HTML templates in this code instead of using lengthy strings.