Angular js directive attribute not being attached to directive scope

Question

I am trying to pass and argument to a directive via element attributes below is a snippet:

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>

In my directive console.log(scope) prints:

The main problem is scope has a data property (screenshot below) but I can't access it by scope.data

I have looked over my entire code again and again but still cant find a solution to this problem.

How can I go about accessing the ng-data property from the directive attribute ?

Cheers!

I think you should have scope.background = scope.data !== undefined ? scope.data : '../../img/pp.png' — Pankaj Parkar
– Pankaj Parkar, Commented Jan 9, 2016 at 21:15
@PankajParkar Already tried that, the thing is that scope.data is always undefined or empty even though in my html i do <div ng-data="{{ vm.background_image }}" class="project-item" bg-fluct> for sure vm.background_image has a value — ipalibowhyte
– ipalibowhyte, Commented Jan 9, 2016 at 21:20
is it the case that you are setting value of background_image from ajax? but still console.log is showing value of data in directive scope — Pankaj Parkar
– Pankaj Parkar, Commented Jan 9, 2016 at 21:22
The value of data is not yet present, while initializing the directive. You could wait with initializing this directive until the value is there (e.g. ng-if="valueIsAvailable) or just $scope.$watch the passed value and as soon it is another value, change the variable. Another way is to just access the passed variable in the view. — ssc-hrep3
– ssc-hrep3, Commented Jan 9, 2016 at 21:58

Rida BENHAMMANE · Accepted Answer · 2016-01-10 11:33:59Z

1

One simple solution to your issue is to use $timeout, by wrapping your code in a timeout you give the digest loop the time to execute and initialize your attribute:

$timeout(function() {
    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'
      });
}, 0); // <== 0 timeout or some if it didn't work

Another solution maybe to register a watcher on your attribute:

scope.$watch('data', function(data){/* the same as the previous example */})

answered Jan 10, 2016 at 11:33

Rida BENHAMMANE

4,1291 gold badge16 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

ipalibowhyte Over a year ago

Dang it, you beat me to it! I realised the problem was that I was making a call to a service which was asynchronous. So the first time when the directive is initialised, data is always undefined. Nevertheless,Thank you so much!!! :D :D

Collectives™ on Stack Overflow

Angular js directive attribute not being attached to directive scope

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related