understanding angular directives

Question

I am using Angular.JS version 1.1.5 and I am using the following code I found on stackoverflow to change the background-image of a div:

angular.module('app', [])
.directive('ng-background', function(){
  return function(scope, element, attrs){
    var url = attrs['ng-background'];
    element.css({
      'background-image': 'url(' + url +')',
      'background-size' : 'cover'
    });
  };
});

Then, in my HTML, I have the following (jade template)

html(ng-app)
  div(ng-controller='myCtrl')
    div.big-image(ng-background='{{flags.imgSrc}}')

Now, please consider that flags.imgSrc does work and returns a correct image URL, as I have previously tested it with an img(ng-src='{{flags.imgSrc}}').

The problem with this is that it does not seem to work at all! I have tried to put a console.log('test') inside my directive but it does not seem to called. Any ideas why? Thanks in advance.

iConnor · Accepted Answer · 2013-09-14 22:24:47Z

1

That is because you need to rename your directive to ngBackground Angular converts snake-case to camelCase for your convenience.

EXAMPLE:

.directive('ngBackground')

HTML

div.big-image(ng-background='{{flags.imgSrc}}')

Normal Example

App.directive('myAmazingDirective');

HTML

<div my-amazing-directive></div>

Also you would have to get your attributes using camelCase as well so.

var url = attrs.ngBackground;

answered Sep 14, 2013 at 22:24

iConnor

20.2k14 gold badges66 silver badges98 bronze badges

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

4 Comments

john smith Over a year ago

I cannot really see any convenience in that! thanks anyway! another thing, what about attrs['ng-background'] just inside the directive? should it be camelCased or snake-cased?

john smith Over a year ago

that's right maybe It's just that there's a bigger learning curve. Anyway, it still does not seem to work for me, any way to check it? I have added the console.log just before the return statement, is that correct? should it be called it everything was set right?

john smith Over a year ago

ok, got that. yea, the problem seems to be another one then... do you have 2 minutes in chat?

john smith Over a year ago

alright, got that. it seems to work if I insert the direct url, but it does not with something like ng-background="{{flags.imgSrc}}" which is pretty weird, it does with ng-src.... any idea why?

John Munsch · Accepted Answer · 2013-09-14 22:25:04Z

0

Your directive is likely never getting called. For a directive named "ng-background", I'm not even sure how you would call that. Normally the camel cased name of the directive is converted to the dashed name you use in your HTML.

To quote an example from AngularJS official documentation. They create a directive named myCurrentTime and call it via:

<span my-current-time="format"></span>

Look at the "Writing Directives (short version)" on this page: http://docs.angularjs.org/guide/directive

answered Sep 14, 2013 at 22:25

John Munsch

19.5k8 gold badges45 silver badges74 bronze badges

Collectives™ on Stack Overflow

understanding angular directives

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related