AngularJS + Coffeescript - 'Hello World' directive not working

Question

I can't make the simplest of directives work in my AngularJS + Coffeescript project.

I have this code in directives.coffee:

'use strict'
app_name = "myApp"
app = angular.module "#{app_name}.directives", []

# Directive to include the version number of my project
app.directive 'appVersion', [
'version', (version) ->
    (scope, element, attrs) ->
    element.text version
]

# Hello world directive
app.directive 'hello', () ->
    restict: 'E'
    template: '<div>Hello World</div>'

And in my template, when I do

<span app-version></span>
<hello></hello>

then the version number appears (0.1), showing that the first directive works properly, but the tag does not get replaced by anything.

Any idea what I did wrong?

I also tried this, which didn't work either:

# Hello world directive
app.directive 'hello', ->
    class Habit
        constructor: ->
            restict: 'E'
            template: '<div>Hello World</div>'

Martin K · Accepted Answer · 2014-11-10 15:28:58Z

7

You can also write your Angular Directive in CoffeeScript like this which I think is cleaner:

class MyDirective
    constructor: (myService) ->
        // Constructor stuff
        @controller = MyController
        @controllerAs = 'ctrl'
    restrict: 'E'
    replace: true
    scope:
        attributeStuff: '='
    link: (scope, element, attr) ->

angular.module('my_module').directive 'MyDirective', (myService) ->
    new MyDirective(myService)

edited Nov 10, 2014 at 15:28

answered Oct 20, 2014 at 14:49

Martin K

7827 silver badges13 bronze badges

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

2 Comments

virtualandy Over a year ago

do you have any examples of injecting services into a directive using this syntax? I like the style here (versus one we're using which uses an @option function to bootstrap the directive) but was struggling with adapting it on my own.

Martin K Over a year ago

Hi @virtualandy. You can inject services like this: angular.module('my_module').directive 'MyDirective', ($http) -> new MyDirective($http)

dfsq · Accepted Answer · 2013-11-15 19:52:31Z

2

You have a typo:

restict: 'E'

should be

restrict: 'E'

Working code: http://plnkr.co/edit/8TifpS2EmYPLo4wl7YtK?p=preview

edited Nov 15, 2013 at 19:52

answered Nov 15, 2013 at 19:38

dfsq

193k26 gold badges244 silver badges261 bronze badges

Collectives™ on Stack Overflow

AngularJS + Coffeescript - 'Hello World' directive not working

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related