Angular define own directive

Question

I'm currently trying to define my own directive in Angular, which doesn't to more then a console.log(). What I tried was the following:

log.directive.js:

export default function () {
    return {
        bindToController: {
            val: '=log-dir'
        },
        controllerAs: '$ctrl',
        template: "",
        controller: function () {
            console.log("test");
        }
    };
}

Then I import the directive:

import logDirDirective from '../../directives/log.directive';

and add it to my module:

angular.module(MODULE_NAME).directive('log-dir',logDirDirective);

And then, in my HTML I try to use it as:

<div class="......" log-dir>
</div>

What I expected now, is to see test in my console after loading, but I don't. Where is the mistake?

PS: Please note that I'm relatively new to angular and completely new to selfmade directives, so my mistake might me very trivial.

Refer github.com/comsysto/angular-architecture/tree/master/… for components which are needed in building a directive... — Ajay
– Ajay, Commented Jul 8, 2016 at 13:08

Community · Accepted Answer · 2017-05-23 10:28:54Z

1

Directive names and binding/scope config must conform to normalization conventions. It means that correct definition of the directive should be:

angular.module(MODULE_NAME).directive('logDir', logDirDirective);

And the same for bindings config:

bindToController: {
    val: '=logDir'
},

Check "AngularJs directive naming conventions" question for more detailed answer to why.

UPD.

Here is a demo of variations with @ and = bindings: http://plnkr.co/edit/mA0YnVhd7t241kdAvgRl?p=info

edited May 23, 2017 at 10:28

CommunityBot

11 silver badge

answered Jul 8, 2016 at 13:08

dfsq

193k26 gold badges244 silver badges261 bronze badges

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

10 Comments

user5638730 Over a year ago

This doesn't seem to change anything, I wonder why angulars directives would work then (like ng-click, etc..)

user5638730 Over a year ago

hold on, my bad... I also changed (intuitively) it in the html, but then realized, that there, everything has to stay the same (so log-dir). Now it works. Can you tell me, what I'd have to change to log a string, specified when I write the directive in HTML, so I can write div log-dir="special string"and then in console I can find that string?

dfsq Over a year ago

According to your bindToController config, it binds attribute log-dir to controller property named val. So it means, you will be able to do console.log(this.val). But also note, that = means two-way data binding, i.e. it needs to be a valid Angular statement. If you want attribute to be just a string you should use directive like this log-dir="'special string'".

user5638730 Over a year ago

Hmm, somehow I'm getting undefined as value. I'm right, just changing console.log("test") to console.log(this.val) and then writing <div log-dir="another test"></div> right?

user5638730 Over a year ago

Got it, didn't have the single quotes for the string in my directive, thank you.

|

Collectives™ on Stack Overflow

Angular define own directive

1 Answer 1

10 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

10 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related