Error when calling a method within service from a directive in Coffeescript

Question

I have a service called DashboardLayoutStyleCalculatorService with the following methods. Other methods removed because they're not really relevant to the question:

  styleFns =
    table: @computeStyleForTable
    single_value: @computeStyleForSingleValue

  @computeStyleFor = (type, height = null) ->
    return styleFns[type](height)

This service gets called through two different directives:

Directive 1:

scope.computeStyle = (component) ->
  if component?.height?
    height = component.height * 50
  return DashboardLayoutStyleCalculator.computeStyleFor(component.element.type, height)

Directive 2:

scope.computeStyle = (element, rowComponent) ->
  return DashboardLayoutStyleCalculator.computeStyleFor(element.type, rowComponent?.height?)

What my code does in a nut shell is that depending on the input type within computeStyleFor, it calls two different methods for either the table or a single value visualization. There's also some dynamic height calculation based on certain parameters which aren't entirely necessary for this question.

When I run this code in my browser, I get the following error:

main.webpack-a9f3967e.js:27 TypeError: e[t] is not a function
    at Object.computeStyleFor (https://localhost:54321/webpack/main.webpack-a9f3967e.js:10:17938)
    at e.t.computeStyle (https://localhost:54321/webpack/main.webpack-a9f3967e.js:10:16879)
    at fn (eval at compile (https://localhost:54321/webpack/vendor.webpack-6f544239.js:49:29700), <anonymous>:4:627)
    at d.$digest (https://localhost:54321/webpack/vendor.webpack-6f544239.js:48:11027)
    at d.$apply (https://localhost:54321/webpack/vendor.webpack-6f544239.js:48:12692)
    at https://localhost:54321/webpack/vendor.webpack-6f544239.js:47:23881 undefined

It appears there's an issue with either computeStyleFor or styleFns.

score 0 · Accepted Answer · answered Jan 19 '17 at 10:03

From what I see I would assume that your call component.element.type yields an unexpeted key

scope.computeStyle = (component) ->
    if component?.height?
        height = component.height * 50
    return DashboardLayoutStyleCalculator.computeStyleFor(component.element.type, height)
                                                          ^^^^^^^^^^^^^^^^^^^^^^
                                                                |
                                                                ---- Not what you expect

Therefore your later call to

 @computeStyleFor = (type, height = null) ->
    return styleFns[type](height)
                   ^^^^^^
                      |
                      --- fails as styleFns[type] yields undefined which is not a function

add some output to see what the expressions type and styleFns[type] yield

Error when calling a method within service from a directive in Coffeescript

1 Answers1