2017-10-25 27 views
-2

私たちは角のあるサイトを開発しています。私はイベントがdivの上で動作するように得ることができない:私は切り替えたとき私の部門では角のクリックは機能しません

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

この作品へのonclick(クリック):

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

をなぜ私はonclickのではなく、(クリックで警告を得るのですか)?

+1

コードを投稿してください。 – Phix

+0

これは角か角か? Angular(> v2)はかっこのバインディングを使用しますが、AngularJSは使用しません。 – Phix

答えて

1

(クリックした属性値の中にある)角式は、常にテンプレートに関連付けられたコンポーネントで評価されます。角型の式でグローバル変数や関数を使用することはできません。すべての変数と関数呼び出しは、常にコンポーネント上で暗黙的に解決されます。コンポーネントにalert()メソッドがないため、コードは機能しません。

は、その作業を行うには、コンポーネントのコードでは、私はあなたのポストを編集した

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

注意を

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

を必要と。 (click)を使用している場合は、AngularJSを使用していません。 Angularを使用しています。それらは同じフレームワークではありません。

実際にAngularJSを使用している場合は、AngularJSではなくAngularで使用される構文なので、(クリック)は機能しません。 AngularJSでの構文は

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

だろうと、あなたは関連するコントローラ(すべてAngularJS式は$スコープで評価されている)の$の範囲に定義するshowAlert機能が必要になります

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

使用しているフレームワークの名前を知り、適切なドキュメントを読むことは、進歩の最初の一歩です。

0

コードを投稿していない場合は、何が問題なのかわからないが、コントローラのスコープ内で関数を宣言していることを確認してください。 "onclick"を使用するとうまく動作すれば宣言しますそれは間違っている、それは関数が任意の角度のアプリケーションの外で宣言されていることを意味します。

(あなたはNGクリックを使用するときには、あなたの関数のためにどこの角度ルックスだから)「NGクリック」小道具は、現在のコントローラのスコープ内で宣言されている機能のために非常に新しい

0

おかげで両方を、動作します角度。はい、私は誤ってAngular v2がAngularJSと同義であると仮定していました。それは私に知らせてくれてありがとう。私が使用しているAngular v2です。

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!"); 
} 
} 

私はスポットを見ていないよ:typescriptファイルで

<!-- 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> 

:ここ

は(角内と外を知っていた)私は別の開発者によって継承されてきたコードをです関数が$ scopeに代入されているコード内にあります。上のtypescriptでは、selectCategory(...)が機能します。角度コードで呼ばれています。それでも私は同じことをしているように見えますが、clickToFilter_Clicked()は機能しません(呼び出されません)。

関連する問題