Rails 4 with Angular JS encounter Controller is not a function [ng:areq] error

Question

I had prepared a feedback system in the site. User can submit some feedback in a box and submit via Angular JS. It was working well but when I check the system a week ago, it does not work. When submitting the text, the page was reloaded instead of sending off the text. When looking at the Chrome Console, it stated:

Error: [ng:areq] Argument 'FeedbackController' is not a function, got undefined

I have no idea what this error means. I tried to use Postman to test if the server side does work but Postman does not have the authorization InvalidAuthenticityToken. At the moment I am stuck and don't know what can I do to debug this problem. Any idea would be very much appreciated!

Feedback.js.coffee:

@app = angular.module("FeedbackBox", ["ngResource"])
app.factory "Feedback", ["$resource", ($resource) ->
  # It should not be update?
  $resource("/feedbacks/:id", {id: "@id"}, 
    {
      update: {method: "PUT"} ,
    })
]

@FeedbackController = ["$scope", "Feedback", ($scope, Feedback) ->
  ## $scope.messages = Feedback.query()
  #console.log "Within the Controller declaration!"

  $scope.addFeedback = ->
    console.log "Running addFeedback()"
    $scope.newFeedback.feedback_path = document.URL
    # console.log $scope.newFeedback
    Feedback.save($scope.newFeedback)

    ## Showing "Thank you!" after submission */
    $("#messageBox textarea").hide()
    $("#messageBox input:submit").hide()
    $("#messageBox .thanks").show()

    ## Hiding box after 3 seconds */
    setTimeout (->
      $("#messageBox .mainArea").removeClass "open"
      $("#messageBox textarea").show()
      $("#messageBox input:submit").show()
      $("#messageBox .thanks").hide()
      return
    ), 3000

    $scope.newFeedback = {}
]

feedbacks_controller.rb

def create
  respond_with Feedback.create(feedback_params)
end

UPDATE And here is the _feedbackBox.html.erb where I register the Controller:

    <div id="messageBox" ng-app="FeedbackBox" ng-controller="FeedbackController">
        <div class="handle"><%= t("tab_text", scope: 'feedbacks.messageBox')%></div>
        <div class="mainArea">
            <form ng-submit="addFeedback()">
                <p><%= t("question_text", scope: 'feedbacks.messageBox')%></p>
                <% unless signed_in? %>
                  <input type="text" placeholder="<%= t("name_placeholder", scope: 'feedbacks.messageBox')%>" ng-model="newFeedback.sender_name">
                <% end %>
                <div class="thanks" style="display: none; height: 200px;width: 340px;text-align: center;padding-top: 91px;"><%= t("thankyou_text", scope: 'feedbacks.messageBox')%></div>
                <textarea placeholder="<%= t("feedback_placeholder", scope: 'feedbacks.messageBox')%>" ng-model="newFeedback.content"></textarea>
                <input type="submit" value="<%= t("submit_button", scope: 'feedbacks.messageBox')%>">
            </form>
        </div>
    </div>

The structure is very simple... Any idea? Thanks

Where are you registering the controller? What version of angular? Check this http://stackoverflow.com/questions/25111831/controller-not-a-function-got-undefined-while-defining-controllers-globally — PSL, Dec 10 '14 at 01:13
Thanks for your reply! Angular version 1.3.36. I registered the controller at a `div` enclosing the `form`: — Quin, Dec 10 '14 at 08:07
I think what @PSL mentioned should be the source of the problem. The angularjs-rails gem is not fixed to a certain version and I had an `bundle update` a while ago. How can I change this to a non-global setting? Thanks! — Quin, Dec 10 '14 at 08:23
You could register the controller just the way you are registering the factory "Feedback" or you could probably override the setting as explained in my old answer linked in the previous comment... — PSL, Dec 10 '14 at 17:53

score 1 · Accepted Answer · answered Dec 10 '14 at 22:58

Following @PSL suggestion, the problem arose because the angular-js version is upgraded from 1.2.x to 1.3.x. I will have to declare the Controller by adding the following line:

app.controller("FeedbackController", FeedbackController)

Everything works just fine now! Thanks @PSL!

Rails 4 with Angular JS encounter Controller is not a function [ng:areq] error

1 Answers1