It seems like I'm encountering some scope issues that I can't seem to resolve. Here's a rundown of the problem:
I'm trying to create a custom directive called "my-create-content" that will insert an "img" HTML template into the element where the directive is used. I've added ng-show to the "img" tag and set up a timeout function to change ng-show to false after a certain duration. However, even after the timeout, the "img" element remains visible. I suspect there might be a scope problem, but the interpolation of ng-src="{{imageUrl}}" works correctly.
This is my current code snippet:
.directive('myCreateContent', [function() {
function link(scope, element, attrs) {
scope.showImg = false;
function updateImg(url){
scope.imageUrl = url;
scope.showImg = true;
}
if (scope.grid[0].image){
updateImg(scope.grid[0].imageUrl);
setTimeout(function(){
scope.showImg = false;
}, scope.grid[0].duration);
}
}
return {
scope: {
grid: '='
},
template: '<img ng-show="showImg" ng-src="{{imageUrl}}" class="grid">',
link: link
};
}]);
Here's how it looks in the HTML:
<div my-create-content grid="grid" class="container">