Question about $timeout

1

Continuing the discussion from Complex Items with Option Buttons:

I’m just curious as to why you would wrap the directive’s code in a $timeout function. You also didn’t apply its second argument (amount of time). Just looking into your tricks… :slight_smile:

2 
 .directive('backImg', function($timeout){
  return function(scope, element, attrs){
    $timeout(function () {
      var url = attrs.backImg;
      var content = element.find('a');
      content.css({
        'background-image': 'url(http://lorempixel.com/600/200/city/)',
        'background-size' : 'cover'
      });

    });

  };
});

I’m using a timeout here so we can catch the next angular digest cycle. It doesn’t need a time argument, because I want it to happen right away in the next cycle.

3

Ok thanks that clear it up a bit, but leads me to ask why the $timeout is necessary, because I have written a similar directive that works without using it. I’m sure yours is better, but I’d like to know why.

.directive('bg', function () {
	return {
		link: function (scope, element, attrs) {
			if (attrs.bg) {
				element.css("background-image", "url(" + attrs.bg + ")");
			}
		}
	}
4

It more or less just in case. If the directive has a compile function, you want to make sure you call this function next time is starts its digest