Unable to initiate ng-click event in AngularJS

Looking to trigger a function in TypeScript from the view using AngularJS. My technology stack includes AngularJS, TypeScript, and ASP.Net MVC3.

Here is the link in the UI:

<div id="left_aside" ng-controller="MyGivingPortfolioController">
 <div class="charity_portfolio_tile" ng-repeat="Tile in VM.Tiles.TileContainerEntity" >
    <a href="#" ng-click="Delete(Tile.Id)" class="delete_button">delete</a>
 </div>

When clicking this link, the method does not get invoked.

 Delete = function (Id:number) {
    alert("Called " + Id.toString());
}

Attempting to make changes to the function:

Delete(charityID: number) {
    var id = charityID;
    alert(id.toString());
}

Despite these adjustments, the function still does not work. I am unsure of the reason for this issue.

class MyController implements IMyController {


Tiles: TileContainerEntities;

constructor($scope, $http: ng.IHttpService) {
    $scope.VM = this;
    $http.get("/API/PrivateAPI/Test/1").success((responce) =>{this.BusinessReponseList = responce;  });
}



Delete = function (Id:number) {
    alert("Called " + Id);
}

//Delete(charityID: number) {
//    var id = charityID;
//    alert(id.toString());
//}

Would appreciate any insights on how to resolve this issue.

Answer №1

Make sure to update the ng-click in the href to ng-click="VM.Delete(Tile.Id)"

For example:

<div class="charity_portfolio_tile" ng-repeat="Tile in VM.Tiles.TileContainerEntity" >
      <a href="#" ng-click="VM.Delete(Tile.Id)" class="delete_button">delete</a>
</div>

Additional helpful tip: Keep in mind scope inheritance : http://youtu.be/WdtVn_8K17E?t=5m34s. Each ng-repeat creates a new scope :)

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

Error message (7027) detected when attempting to clear cells in Excel Office Script due to unreachable code

I'm encountering an issue with a script that is working fine, except for the part where it's supposed to clear the B4:B120 area in the "// Clear the Margin Updates column" section - which is mysteriously greyed out: function main(workbook: ExcelS ...

AngularJS triggers after the completion of Ajax requests

How can I implement AJAX within Angular AJAX? In my Angular setup, it looks like this: Index.html MyApp.controller('MainController', function($scope, $http, $location , $compile) { $scope.content_middle = 'Welcome'; ...

Reduce the size of the JSON file located in the Assets folder during an Angular build

What is the most effective method to compress JSON files in an Angular production build? I currently have a JSON file in the assets folder that remains unchanged when the production build is completed. During development, the file appears as the Developme ...

If $urlRouterProvider.otherwise is used, $stateProvider will not handle the routing

Previously, when "/" was set as "/main", the code was able to load both main and dashboard using $urlRouterProvider.otherwise("/main/dashboard"); However, after changing it to just "/", the dashboard does not load anymore. This change was made due to an i ...

Is there a way to customize the scrollbar color based on the user's preference?

Instead of hardcoding the scrollbar color to red, I want to change it based on a color variable provided by the user. I believe there are two possible solutions to this issue: Is it possible to assign a variable to line 15 instead of a specific color lik ...

Refresh the information being received without initiating a new process

I am fetching data from an ngrx/store I have subscribed to the data this.store.select(somedataList) .subscribe(myList => { myList.propertyA = "a different value"; }); After modifying the property values upon subscription, I must update the data ...

The data source retrieved through the "get" API method is missing from the mat-table

Recently, I've started working with angularCLI and I'm facing an issue in creating a table where the dataSource is fetched from a fake API. Let me share my component class: import { Component, OnInit } from '@angular/core'; import { Fo ...

Mapping through multiple items in a loop using Javascript

Typescript also functions Consider an array structured like this const elementList = ['one', 'two', 'three', 'four', 'five'] Now, suppose I want to generate components that appear as follows <div&g ...

Utilizing AngularJS HTML5 mode with UI Router on an Apache server

A few days ago, I enabled html 5 mode on my Angular (1.5.8) app using the following code: $locationProvider.html5Mode({enabled:true,requireBase:true}).hashPrefix('!'); Later, I came across a guide on configuring an Apache server for html5 mode ...

Changing the method signature in a TypeScript interface to replace/override the original one

For this specific scenario, the Array<T> interface is being extended in the following manner: interface BetterArray<T> extends Array<T> { push(this: BetterArray<T>, value: T): this; } Important note - the implementation of Arr ...

How do I designate the compiled migration location?

Currently, I am utilizing the PostgreSQL database ORM Sequelize along with TypeScript as a backend script within the Express Node.js environment. My first inquiry is: Is it possible to directly create a model in .ts format? The second question pertains t ...

Setting an optional property to null is not permitted

In my model class, I have defined an optional property as follows: export class Workflow { constructor( public id: number, public started: Date, public documentId: number, public document: Document, public status: WorkflowStatus, ...

Instant Updates with AngularJS

Expanding upon a new tutorial from Codeigniter, I have been trying to learn AngularJS. Currently, the page automatically displays new posts and removes deleted posts while updating the model/DB. However, I believe there might be a more effective way to imp ...

What is the best way to position an image in the bottom right corner of a fluid div container?

I am struggling to position this icon image at the bottom right hand corner of this div, so that it appears as if the message is originating from the icon's head. Despite my efforts, I have yet to find a definitive solution. https://i.stack.imgur.com ...

Retrieve data from a web api at regular intervals using Angular observables and subscription

My Launch method is designed to start an engine by taking parameters and returning the instance name once started. After that, I need to periodically query another service every 2 seconds to check if the status has changed to either "Succeeded" or "Faile ...

Utilize TypeScript File array within the image tag in HTML with Angular 2

I am in the process of developing a web application that allows users to upload CSV data and images, which are then displayed on the application. However, I have encountered an issue where I am unable to display the imported images. The images are imported ...

Updating Angular model remotely without relying solely on the controller

I am struggling to call the addRectangleMethod method from my Javascript code in order to retrieve server-side information into the Angular datamodel. However, I keep encountering an error stating that the method I'm trying to call is undefined. It&ap ...

What is the reasoning behind defaultValue possessing the type of any in TextField Material UI?

According to the Material UI guidelines, the component TextField specifies that its defaultValue property accepts the type any. I decided to experiment with this a bit and found that in practice, defaultValue actually supports multiple types. You can see ...

"Exploring the incredible powers of Ionic2, Angular2, HTTP requests, and

Despite all the research I've done on observables, I still struggle to grasp how they function. The HTTP request code snippet is as follows: import { Component, OnInit, Injectable } from '@angular/core'; import { Http, Response, Headers, R ...

Unlocking new perspectives with a click

Currently exploring Angular development, I have encountered a question here but couldn't find the solution I was looking for. I am seeking suggestions and ideas on how to approach this issue. Essentially, my HTML includes buttons like the ones shown ...