ng-click not triggering the typeScript function

I am encountering an issue while integrating my AngularJS code with TypeScript as my ng-click function is not functioning properly. Below is my controller code:

module CustomerSearch.controllers {
    export class CustomerCtrl {
        static $inject = ['$scope', '$http', '$templateCache'];

        constructor(protected $scope: ICustomerScope,
            protected $http: ng.IHttpService,
            protected $templateCache: ng.ITemplateCacheService) {
            $scope.search = this.search;
        }
        public search = (search: any) => {
            debugger;
            var Search = {
                AccountId: search.AccountId,
                checkActiveOnly: search.checkActiveOnly,
                checkParentsOnly: search.checkParentsOnly,
                listCustomerType: search.listCustomerType
            };




            this.$scope.customer = [];
            this.$scope.ticket = [];
            this.$scope.services = [];

            var url = "someUrl"; // '<%=ResolveUrl("API/Search/PutDoSearch")%>'
            this.$http.put(url, Search).
                success((data, status, headers, config) => {
                debugger;
                this.$scope.cust_File = data[0].customers;
                this.$scope.ticket_file = data[0].tickets;
                this.$scope.service_file = data[0].services;
            }).
                error((data, status) => {
                console.log("Request Failed");
            });
        }
    }
    angular.module("CustomerSearch").controller("CustomerSearch.controllers.QuickSearchController");
}

I am attempting to invoke my TypeScript class using ng-click, but it seems that there may be a problem causing the ng-click event to not be processed correctly.

Answer №1

To put it simply, the term "search" is not what you might expect it to be. Here are a couple of reasons why:

  • The class constructor does not actually run: try adding a console.log inside it.

  • The term "search" is referencing a different JavaScript object. To see this in action, select the element in the UI while using Chrome and log out:

    console.log(angular.element($0).scope())

Answer №2

Resolved the issue by properly registering my controller in TypeScript and adjusting reference order accordingly.

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

What are the best techniques for streamlining nested objects with Zod.js?

As a newcomer to zod.js, I have found that the DataSchema function is extremely helpful in verifying API data types and simplifying the API response easily. However, I'm curious if there is a way to streamline the data transformation process for myEx ...

Enabling a mat-slide-toggle to be automatically set to true using formControl

Is there a way to ensure that the mat-slide-toggle remains true under certain conditions? I am looking for a functionality similar to forcedTrue="someCondition". <mat-slide-toggle formControlName="compression" class="m ...

Delivering a static Angular app through an Express Server

In my current setup, I have an Angular app being served as static content in an Express Server. When Express serves static files, it automatically adds an ETag to them. Subsequent requests will then check if the ETag matches before sending the files agai ...

Tips for efficiently passing a JSON object to a resource using AngularJS

I am looking to integrate a web service that accepts a JSON object with two arrays in a POST request and responds with a JSON object array. Now, I want to make a request to this service from my AngularJS application. Below is the code snippet: wellApp.fa ...

Is it possible to combine TypeScript modules into a single JavaScript file?

Hey there, I'm feeling completely lost with this. I've just started diving into Typescript with Grunt JS and I could really use some assistance. I already have a Grunt file set up that runs my TS files through an uglify process for preparing the ...

Eliminate the unnecessary code repetition in my functions using Typescript

I have 2 specific functions that manipulate arrays within an object. Instead of repeating the same code for each array, I am looking for a way to create reusable functions. Currently, my functions look like this: setLists(): void { if (this.product.ord ...

Incorporating a Text Box in an Angular Form

I am facing an issue with dynamically adding a textbox to an Angular form using ng-repeat. When I push an empty string to the array, it successfully adds another textbox but the problem arises when the data is not synced properly with ng-model. The newly a ...

determine the values of objects based on their corresponding keys

Still on the hunt for a solution to this, but haven't found an exact match yet. I've been grappling with the following code snippet: interface RowData { firstName: string; lastName: string; age: number; participate: boolean; } c ...

Currently trapped within the confines of a Next.js 13 application directory, grappling with the implementation of a

I need to figure out how to export a variable from one component to layout.tsx in such a way that it is not exported as a function, which is currently causing the conditional check in the class name to always be true. Below is the code snippet: // File w ...

What could be the reason for the failure of running the command `meteor npm install --save angular

Encountering a major problem with meteor npm install while using: Meteor Angular Meteor The issue arises when trying to import ui-grid, similar to importing uiRouter or angularUBoostrap. However, this has proven to be extremely difficult. I have attemp ...

Exploring the ng-repeat directive's scope

Each item on my list can be highlighted when clicked, using the selectedData class. <div>Remove highlight </div> <ul> <li ng-repeat="data in inputData"> <span title="{{data}}" ng-class="selected ? 'selectedData' : ...

Utilizing Typescript to troubleshoot linting issues

After running the TypeScript linter, I received the following error message: Do not use Function as a type. The Function type accepts any function-like value, providing no type safety when calling the function. This lack of specificity can lead to common ...

How can resolvers in GraphQL optimize data fetching based on necessity?

I am working with two unique GraphQL types: type Author { id: String! name: String! } type Book { id: String! author: Author! name: String! } Within my database structure, there exists a foreign key inside the books table: table authors (pseu ...

What is the process for inputting a value within single quotation marks?

I'm working with a code snippet that looks like this: for(var j=0; j < this.arr.length; j++) { arr.push({ id: 'j', label: this.arr[j], display: () => this.arr[j] }) } I am curious about ho ...

Locate the initial occurrence of a duplicated element within an array

I need to check for duplicate values in an array element. Within my array, I have multiple objects like {S:1,R:2,V:3}. My goal is to display an alert message if there are duplicate values for the "S" element in that array. My Approach: var arr=[{S:1,R:2 ...

Angular class change on scroll

HTML <ion-app> <ion-content> <div #scrolledToElement class="second-block" [ngClass]="flag ? 'red' : 'green' "></div> </ion-content> </ion-app> CSS .second-block { margin ...

Halt the execution of Angular and switch to performing a different task instead of continuing with the rest of

I have been diligently working to replace all alert() pop-ups in our Angular code with Angular overlay modals. The transition has been smooth for the most part, but I am facing a specific issue that I need help with. One of our modals is designed to appea ...

The directive does not actively monitor changes to the value attribute

Whenever I click on an input field, a color picker pops up and the selected RGBA string is written back to the input's value attribute. Initially, I believed that adding ng-model="color" to the input tag would be enough for the color variable to hold ...

Attempting to confirm the accuracy of a data point within an extensive and interactive online table

I am facing a challenge in verifying a specific value from a large web table because none of the locators are unique and Selenium is unable to find all the elements. I am using Selenium and Cucumber JVM for automation. Below is a snippet of the HTML code ...

Invalid component prop provided to ButtonBase in Material UI. Ensure that the children prop is correctly rendered in this custom component

Forgive me for asking a basic question, as I am not the most proficient frontend developer and have searched extensively online. Whenever I inspect my frontend application in Chrome, I keep encountering this error. (3) Material-UI: The component prop pro ...