AngularJS + Coffeescript - 'Hello World' directive not working
-
20-12-2019 - |
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>'
Solution
You have a typo:
restict: 'E'
should be
restrict: 'E'
Working code: http://plnkr.co/edit/8TifpS2EmYPLo4wl7YtK?p=preview
OTHER TIPS
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)
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow