I am trying to append a few cards in my template via a directive.
When I hard code the html and place it inside the template, everything is fine.
But when I append the html through a directive, it does not reflect. So inspect element and verifed that the cards were indeded prepended but were not showing up.
Any idea whats wrong?
STN_MONSTER_MODULE.directive('prependCard', function($compile, $rootScope, notificationFactory, localStorageFactory, sessionStorageFactory, $ionicScrollDelegate, $timeout, ionicMaterialMotion,uxFactory,ionicMaterialInk) {
return {
restrict: 'A',
scope: {
card: '='
},
link: function(scope, element, attr) {
var target = angular.element(document.querySelector('#feedContainer'))
scope.$watch('card', function(newValue, oldValue) {
if (scope.card) {
var cardObj = scope.card;
//alert('Directive about to append');
angular.forEach(cardObj, function(value, key) {
if (value.is_read == 1) {
var read_status = 'Read';
} else {
var read_status = 'Unread';
}
console.log(key + ': ' + value);
switch (value.cmd) {
case 'REQUESTSONG':
var template = "<h1>CARD REQUESTSONG</h1>";
break;
case 'PLAYED_SONG':
var template = "<h1>CARD PLAYED_SONG</h1>";
break;
case 'PLAYED_STORY':
var template = "<h1>CARD PLAYED_STORY</h1>";
break;
}
var content = $compile(template)(scope);
target.prepend(content);
});
$ionicScrollDelegate.scrollTop(true);
}
}, true);
}
};
});
I am trying to append a few cards in my template via a directive. When I hard code the html and place it inside the template, everything is fine. But when I append the html through a directive, it does not reflect. So inspect element and verifed that the cards were indeded prepended but were not showing up.
Any idea whats wrong?
This is my template :
Te cards get appended but screen appears blank?? Any help?