web-dev-qa-db-ja.com

AngularJS-this.valueを関数に渡す

私はネイティブJavaScriptでこのコードを使用しており、問題なく動作します。テキストボックスの現在の値を記録します

<script>
    var boom = function(val) {
        console.log(val);
    };
</script>

<input type="text" onclick="boom(this.value)"/>

次に、モデルを使用せずにAngularJSでも同じようにしたいと思います。これがコードです：

$scope.boom = function(val) {
    console.log(val);
};

<input type="text" ng-click="boom(this.value)"/>

ただし、常にログに記録されますndefined！
なぜ？

javascriptangularjsfunctionangularjs-scope
10
boi_echos

私が知っているように、_ng-*_のコンテキストにおけるthisはscopeです。
boom($event.target.value)を介してアクセスできます。

23
Miraage

Angular方法はngModelを使用することです：

<input type="text" ng-model="input" ng-click="boom()"/>

そしてコントローラーで：

var boom = function() {
    console.log($scope.input);
};

thisは現在のスコープオブジェクトを指しているため、this.inputも機能します。

それでもモデルを避けたい場合は、イベントオブジェクトを使用できます。

<input type="text" ng-click="boom($event)"/>

そして

var boom = function($event) {
    console.log($event.target.value);
};
10
dfsq

「値」はスコープで定義されていません。

ミラージュの答えを少し広げます。

thisはスコープを参照します。 DOM要素にアクセスする場合は、$ eventを使用します。コールバック関数では、boom($event.target.value)を使用してDOM要素の値を取得できます

1
Pedro Justo