CoffeeScript does not recognize the Angular controller function

I am new to using Angular and CoffeeScript in combination, integrating it into a Rails project. My goal is to create a function within the controller that triggers upon clicking a button in the view.

Below is the HTML markup:

<div id="labs">
  <div class="clients" ng-repeat="client in clients" ng-class="{first: $index == 0}">
    <h1>{{client.name}}</h1>
    <div class="labs">
      <ul>
        <li ng-repeat="lab in client.labs">
          <a ng-href="/#!/labs/{{lab.id}}/process">
            <button ng-click = "test()">Test</button>
            <span>{{lab.name}}</span>
            <span>{{lab.created_at | date:'MMMM yyyy' }}</span>
          </a>
        </li>
      </ul>
    </div>
  </div>
</div>

This is the relevant Controller code:

angular.module("deloitte").controller('labsCtrl', ['$scope', 'labService','labPreferencesService', ($scope, labService, labPreferencesService ) ->  

  labService.query (data) ->
    $scope.clients = data
   # console.print (clients)

       $scope.test -> console.log("Hello!");
])

The error message being displayed is:

angular.js?body=1:5755 TypeError: $scope.test is not a function
    at new <anonymous> (labsController.js?body=1:7)
    at invoke (angular.js?body=1:2903)
    at Object.instantiate (angular.js?body=1:2915)
    at angular.js?body=1:4806
    at update (angular.js?body=1:14199)
    at Object.Scope.$broadcast (angular.js?body=1:8308)
    at angular.js?body=1:7464
    at wrappedCallback (angular.js?body=1:6847)
    at wrappedCallback (angular.js?body=1:6847)
    at angular.js?body=1:6884

I have verified the syntax and it seems correct. Even attempting `=->` still results in an error. Any assistance would be greatly appreciated.

Answer №1

Would you prefer to invoke the .test() method on your $scope or declare it?

$scope.test -> console.log("Hello!");

// Results in
$scope.test(function() {
  return console.log("Hello!");
});

If you opt for defining/assigning:

$scope.test = -> console.log("Hello!");

// Results in
$scope.test = function() {
  return console.log("Hello!");
};

It's likely that this is what you are looking for.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Implementing a PHP back button to navigate through previous pages

Currently, I am in the process of coding a project. In this project, there are a total of 10 pages, each equipped with back and forward buttons. However, when I attempt to navigate using either javascript:history.go(-1) or $url = htmlspecialchars($_SERVER ...

Customize your MUI Select to show the selected value in a different way within the Input field

I have a collection of objects and I am looking to link multiple attributes of the object in MenuItem, but I only want one attribute to be displayed in Select https://i.sstatic.net/kDKLr.png The image above displays "10-xyz" in the select display, when i ...

The Jquery Ajax POST function seems to be malfunctioning as it returns an undefined value

When using the POST method, there seems to be an issue with the return value being undefined. However, the GET method is working perfectly fine. I have even attempted $.post(url, data, success); << but $.post made things even worse as both GET and PO ...

The attempt to test the AngularJS application using the Jasmine plugin was unsuccessful

I'm currently in the process of learning how to write test cases for my angularJS application. As a beginner, I'm searching for some sample examples of working demos. I came across an example online that uses the Jasmine plugin to test an angular ...

Is there a way to turn off the auto-complete feature for JavaScript keywords in HTML within JSX in WebStorm?

While using WebStorm, I've noticed that it automatically completes JavaScript keywords as I type regular text in JSX. This behavior is starting to frustrate me because I have to constantly press ESC or click elsewhere to hide the auto-complete popup. ...

Angular ng-repeat app not functioning as intended due to a lack of complexity

Seems like I've stumbled upon a rather silly issue here and it might be a duplicate question, but I'm still scratching my head over it. I have this incredibly basic Angular app along with some HTML. While debugging in Chrome, I can clearly see ...

Incorporate a background image property using Jquery

Can anyone help me with adding the css background-image:url("xxxxx") property to my code? jQuery('#'+$trackID+' .sc_thumb').attr('src',$thumb_url); jQuery('#'+$trackID+' .sc_container').css('display& ...

Having difficulty accessing the Material UI Icons

I encountered an issue when attempting to utilize Material UI icons - as soon as I added the icon component, an error occurred. https://i.stack.imgur.com/issmm.png For reference, you can find the code on CodeSandbox at the following link: https://codesand ...

Styling an active link in Next.js using Styled Components

Looking for a way to customize the active link style using styled components. I have a navigation bar where the currently active link should have a specific style applied. Any suggestions are appreciated! import React from 'react' import Link f ...

How to reference an image source using a relative path in jQuery qTip

Hello, I'm working on a jQuery qTip tooltip for my web application and I'm facing an issue with setting a relative path for an image in the tooltip. Here is the code snippet I am using: $('#behind-the-behaviour span[title]').qtip({ ...

Refreshing a div using JQuery/Ajax upon an update to a column in a database table

I am interested in checking for database column value changes and utilizing jQuery/Ajax to load a specific page into a designated div container. For example, let's say that on the main page, I have 1.php displayed within a div with the id "status." ...

How to Remove onFocus Warning in React TypeScript with Clear Input Type="number" and Start without a Default Value

Is there a way to either clear an HTML input field of a previous set number when onFocus is triggered or start with an empty field? When salary: null is set in the constructor, a warning appears on page load: Warning: The value prop on input should not ...

URL endpoint resource containing a parameter enclosed in parentheses for a RESTful API

For a current project I am tackling, the client has provided a specific HTTP POST command that needs to be integrated into the existing webserver built on a MEAN STACK. The request is as follows: ({{Host}}/Products('{{ProductId}}')/Data.Order). I ...

Prevent any http requests until an observable completes its task

I'm currently developing an Angular interceptor where, before sending any non-GET requests, I need to make a GET request to obtain a specific header from the server and then set that header on all subsequent requests. Is there a method for achieving t ...

Transferring Information between a Pair of Controllers

Currently, I am utilizing angular version 1.x and faced with the challenge of sharing data between two controllers. In my mainctrl, I am working with the above model. The radiotmplt.radiohead=='IRU600v3' is utilized in firstctrl. Unfortunately, ...

The flow of Node.js persists despite a response being dispatched

The code snippet I have below checks for spaces in a text, verifies a link asynchronously, and handles post requests. However, there is an issue when the email and password fields are null, resulting in an error message "Cannot read property 'trim&apo ...

Tips for capturing and storing video with HTML5 WebRTC

Before reading the description, make sure to run the code snippet first. This will provide you with a better understanding of the structure. In the 2nd video element, I am trying to record, play, and save video. The issue I'm encountering is that the ...

I am experiencing difficulty getting my component to properly implement the bootstrap NavBar and NavIcon styles

I am new to using bootstrap with react and I am facing an issue where the dimensions are not being applied to my Navbar and Navbar Icon. I have already installed dependencies and used className instead of class, but still no changes are visible. import Re ...

Switch between individual highcharts by selecting or deselecting checkboxes

One of the challenges I am facing involves manipulating multiple scatter plots created with highcharts. I have a list of checkboxes, each labeled to correspond with legend identifiers in the highcharts. My goal is to create a dynamic functionality so tha ...

The utilization of ReactJS to render basic HTML elements

Completely new to react, I'm not sure if my code is written the "react way". Created some react classes rendering a Bootstrap Modal. Set the initial states by calling an Ajax function within componentsDidMount. Everything works until trying to insert ...