角度点击不适用于我的 div

Question

We're developing an angular site. I can't get the event to work on a div:

<div style="width: 100%; height: 30px;" (click)="alert('Hello!')"></div>

This works when I switch (click) to onclick:

<div style="width: 100%; height: 30px;" onclick="alert('Hello!')"></div>

Why do I get the alert with onclick but not (click)?

Answer 1

Angular expressions (what you have inside the (click) attribute value) are always evaluated on the component associated with the template. You may not use global variables or functions in an angular expression. All the variables and function calls are always implicitly resolved on the component. There is no alert() method in your component, so that code can't work.

To make that work, you need

(click)="showAlert('Hello')"

and, in the component code

showAlert(message) {
  window.alert(message);
}

Note that I edited your post. If you're using (click) , then you're not using AngularJS. You're using Angular. They are not the same framework.

If you're really, using AngularJS, then (click) won't work because that's the syntax used in Angular, not AngularJS. The syntax in AngularJS would be

ng-click="showAlert('Hello');

and you would need the showAlert function to be defined on the $scope of the associated controller (all AngularJS expressions are evaluated on the $scope):

$scope.showAlert = function(message) {
  window.alert(message);
}

Knowing the name of the framework you're using, and reading the appropriate documentation, would be a good first step to progress.

Answer 2

If you don't post your code we can't know what went wrong, but make sure you're declaring the function inside your controller's scope, if using "onclick" works fine for you, then you're declaring it wrong, it means the function is declared outside any angular application.

the "ng-click" prop will only work for functions that are declared inside the current controller's scope ( since that's where angular looks for your function when you use ng-click )

Answer 3

Thanks both, very new to Angular. Yes, I was falsely assuming Angular v2 was synonymous with AngularJS. Thanks for informing me that it's not. It's Angular v2 that I'm using.

Here's the code that I've inherited by another developer (who knew Angular inside and out):

    <!-- filter -->
    <div class="filter" (click)="clickToFilter_Clicked()"> **<!-- This is where I'm having trouble -->**
...
    </div>

    <!-- data list -->
    <div class="data-list">
        <all-data-row *ngFor="let item of categoryRows; let last=last"
                        relativeWidth="100"
                        [item]="item.chartData"
                        [last]="last"
                        (click)="selectCategory(item.fullObject)" **<!-- This works somehow -->**
                        [selected]="selected">
        </all-data-row>
    </div>

In the typescript file:

import { Component, ViewEncapsulation, OnInit, OnDestroy, Input } from '@angular/core';

@Component({
selector: 'all-data-page',
templateUrl: './all-data-page.component.html',
styles: [ require('./all-data-page.style.scss') ],
})
export class AllDataPageComponent implements OnInit {
@Input() allData: any;
@Input() type: any;

private criticalityChartData: any[] = [];
private categoryRows: any[] = [];
private selected: any = null;

private colors: any = {
    'Safeguards': {
        'MEC': '#8f8fc6',
        'MEC-P': '#ebb174',
        'BPCS': '#2eb9ba',
        'BPCS-T': '#5a96d0',
        'BPCS-C': '#c0db73',
        'SIS-A': '#e5cf2d',
        'SIS': '#f69c94',
        'Other LS': '#ea7474',
        'Other LS-T': '#50c0a4',
        'Other LS-C': '#81c341',
        'PRO': '#6f6db2',
        'ROUND': '#b94a9c',
        'PM': '#ca94c2',
        'OCC': '#1cac5c',
        'OTHER': '#d56853'
    }
};

ngOnInit(): void {
    this.allData.forEach((category) => {
        if (category != null && category.Title === this.type) {
            if (!!category.CriticalityPieChart) {
                this.criticalityChartData = category.CriticalityPieChart;
                category.Items.forEach((item) => {
                    this.categoryRows.push({
                        'fullObject': item,
                        'chartData': {
                            'ValueColor': item != null ? this.colors[this.type][item.Category] : '',
                            'Value': item != null ? item.Criticality : '0.0',
                            'ValueLabel': item != null ? item.Title : ''
                        }
                    });
                    if (this.selected === null) {
                        this.selected = this.categoryRows[0].fullObject;
                    }
                });
            }
        }
    });
}

**// This function gets called:**
selectCategory(category) {
    this.selected = category;
}

closeDetails() {
    this.selected = null;
}

**// This function doesn't get called:**
clickToFilter_Clicked() {
    alert("Clicked!");
}
}

I'm not seeing a spot in the code where functions are being assigned to $scope. In the typescript above, selectCategory(...) works. It's called from in the angular code. Yet clickToFilter_Clicked() doesn't work (doesn't get called) even though it seems I'm doing the same thing:

<div (click)="clickToFilter_Clicked()"></div>