I have been attempting to pass an argument to a directive through element attributes as shown in the snippet below:
directive
app.directive('bgFluct', function(){
var _ = {};
_.scope = {
data: "@ngData"
}
_.link = function(scope, elem, attr) {
// if there is no image provided use pp.png the default
scope.background = scope.data !== undefined ? scope.data : '../../img/pp.png'
elem.css(
{
'background': 'url('+scope.background+')',
'background-size': 'cover',
'background-repeat': 'no-repeat',
'background-position': 'center center'
})
}
return _;
})
html
<div class="four columns" style="margin-right: 20px;">
<div class="row">
<div ng-data="{{ vm.background_image }}" class="project-item" bg-fluct>
</div>
</div>
</div>
When I use console.log(scope) in my directive, it displays the following:
https://i.sstatic.net/4BphY.png
The biggest issue I am facing is that even though the scope shows a data property (as seen in the screenshot below), I am unable to access it using scope.data
I have thoroughly reviewed my code multiple times but still cannot seem to find a solution to this problem.
Is there any way for me to access the ng-data property from the directive attribute?
Cheers!