Having trouble getting ng-click to function properly in TypeScript

I've been struggling to execute a function within a click function on my HTML page. I have added all the TypeScript definition files from NuGet, but something seems to be going wrong as my Click Function is not functioning properly. Strangely, there are no errors appearing in the console.

Below you will find my HTML and Controller Code:

HTML Page

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <script src="Scripts/angular.js"></script>
    <script src="test.js"></script>
    <title></title>
</head>

<body ng-app="testModule">
    <div ng-controller="test">
        <input type="button" ng-click="click()" value="test" />
    </div>
</body>
</html>

Controller

angular.module("testModule", []);

class test {
    constructor() { }

    click() {
        alert();
    }
} 

angular.module("testModule").controller("test", test );

Answer №1

The issue arises because the function ng-click="click()" is attempting to invoke $scope.click(), which has not been defined.

I highly recommend implementing the controller as syntax while working with AngularJS and Typescript.

Check out this demo for a practical example.

Answer №2

Below is the revised code. Please note that @Aides provided their answer first.

HTML Page

<!DOCTYPE html>
<html> <!-- it's 2016 -->
<head>
   <script src="Scripts/angular.js"></script>

   <script src="test.js"></script>
   <title></title>

</head>
<body ng-app="testModule">
   <div ng-controller="Test as test">
       <input type="button" ng-click="test.click()" value="test" />
   </div>
</body>
</html>

Controller

angular.module("testModule", []);

class Test {

    click() {
        alert();
    }
} 

angular.module("testModule").controller("Test", Test );

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

Steps for disabling and collapsing an individual header on the JQuery Accordian

Looking to adjust the behavior of 4 headers in accordions? Specifically, you want to collapse and disable only the first header out of the set. Here's how: $("#ExpandCollapse").accordion({ active: false, collapsible: true }); To ...

search for a specific value within a nested subfield of an asterisk star field in Firestore

Here is the data I have: { root: { _rEG: { fen: 'value' }, _AS: { fen: 'value' }, _BSSA: { fen: 'value' } } } I would like to query using where('root.*.fen', '==', 'value'). ...

jqgrid now features inline editing, which allows for the posting of only the data that

My jqGrid includes editable columns, and I am looking for a way to only post the data of columns where changes have been made. Here is an example of my colModel: colModel: [{ name: 'I_PK', index: 'u.I_PK ...

Organize array by "categories" in Javascript and preserve the original sequence

There is a dataset presented below: [ { "name": "Item1", "section": "section1", "total": 3, }, { "name": "Item1", "section": "section2", "total": 4, }{ "name": "Item1", "section": "section3", "total": 7, }, { "name" ...

Which specific values could cause the function to fail?

I am considering implementing the function provided below: function removeDuplicates(array){ var output=[],object={}; for(var index=0,length=array.length;index<length;index++){ object[array[index]]=0; } for(index in object){ ...

Using VueJS to determine if a certain string includes a specific substring within an if-statement embedded within a v

I am aiming to verify if the link in a json object contains 'http'. If it does, I want to assign a target='_blank' attribute to the v-btn. The link could also be something like #test. Currently, this is how I am attempting to achieve i ...

Avoiding $$hashKey in ngRepeat in AngularJSLearn how to bypass

I'm currently working on creating dynamic tables from an object. Here's the structure of my Object: { categories: ["kids", "home"], home: [{ name: "home 1.1", title: " home 1.2" }, { name: "home 2.1", title: "home 2.2" }, ...

The AngularJs/Bootstrap modal doesn't display despite appearing to be functioning correctly

I recently set up a bootstrap template and incorporated it with AngularJs. My issue arises when I click the button that triggers the modal - while I can see the "fade" animation indicating that the call is working, the actual content of the modal fails to ...

Tips for positioning the Google Custom Search bar

I am looking to position the Google custom search box on the left side of my website. Currently, I am using a website builder called imxprs and have implemented this code for my custom search box. <script> (function() { var cx = '013012 ...

The input form in my Node.js project is not adapting to different screen sizes. I am currently utilizing ejs as the template

I have integrated ejs as a template in my Node.js project, but I am encountering an issue with the input form in the following code snippet. The form is unresponsive, preventing me from entering text or clicking on any buttons. What could be causing this ...

Trouble with controlling the speed of ajax requests while using vue-multiselect and lodash

I am working on a Vue application that includes a vue-multiselect component. My goal is to load the multiselect options via ajax. To achieve this, I am using lodash.throttle to limit the frequency of ajax requests as the user types in the search criteria ...

What is the best way to submit form data along with an image using Angular?

Recently, I built an application where users can submit form data along with an uploaded image. Since I am new to Angular, I am facing some challenges in merging the user-submitted data model and the image upload using the FormData method. Can anyone guide ...

Effective methods for transferring parameters between two separate JavaScript files within an express.js application

Currently, I am working with Express.js and facing a challenge in passing parameters from one JavaScript file to another. How can this be accomplished? The two files involved are 1. process.js var WebPageTest = require('webpagetest'); var wpt ...

Having trouble with displaying the modal dialog in Twitter Bootstrap 3?

There seems to be an issue with my Twitter Bootstrap modal as it is not rendering the dialog box correctly, and I'm puzzled about the reason behind this. HTML <p class="text-center btn-p"><button class="btn btn-warning" data-toggle="modal" ...

The Vue JS task manager is unable to remove completed tasks from the list

I'm encountering an issue with the 'DELETE ONLY FINISHED' button. The goal is for this button to delete all finished tasks. When a task is completed, its 'finishedTask' property changes to true. I have attempted to store all finish ...

Pressing a button triggers an Ajax response, but in CasperJS it results in the entire page being refreshed

Recently, I've been experimenting with CasperJS in an attempt to identify Free-Email Alias on My focus is on the input field labeled "E-Mail-Wunschname:" where I intend to input a name, click the "Prüfen" button, and then extract the suggested accou ...

Unraveling the complexities of parsing multi-tiered JSON structures

I am struggling with indexing values from a multi-level JSON array. Here is the JSON data in question: { "items": [ { "snippet": { "title": "YouTube Developers Live: Embedded Web Player Customization" } ...

Vue fails to reflect changes in data when it is updated

I have a page where I can access data by calling domain.com/subpage?soundfile=something Using the fetch method, I extract the query parameter from the URL to retrieve the necessary information. The retrieval process is successful as indicated by the data ...

The functionality of the Eslint object-property-newline feature is not functioning as expected

Within my configuration file .eslintrc, I have set "object-property-newline": ["error", { "allowAllPropertiesOnSameLine": true }], and "max-len": "off". However, objects like const something = {a: 5, ffsdfasdasdsddddd: 'asdasdasdddddddddddssssssddddd ...

Choosing various files from separate directories within an HTML input type="file" element

Is there a way to select multiple files from various directories using the HTML input type="file" element? I have been searching for resources on how to do this without any luck. Are there any npm packages that can assist with achieving this functionalit ...