angularjsでイベントをトリガーした要素にアクセスする方法は？

私のウェブアプリでは、BootstrapとAngularJSの両方を使用しています。2つを一緒に動作させるのに少し問題があります。

属性を持つ要素があります data-provide="typeahead"

<input id="searchText" ng-model="searchText" type="text"
       class="input-medium search-query" placeholder="title"
       data-provide="typeahead" ng-change="updateTypeahead()" />

またdata-source、ユーザーがフィールドに入力したときに属性を更新したいと思います。関数updateTypeaheadは正しくトリガーされますが$('#searchText')、AngularJSの方法ではなくjQueryの方法であるを使用しない限り、イベントをトリガーした要素にアクセスできません。

AngularJSを古いスタイルのJSモジュールで動作させる最良の方法は何ですか。

 updateTypeahead(this)

DOM要素を関数に渡しませんupdateTypeahead(this)。ここでthisはスコープを参照します。DOM要素にアクセスする場合は、を使用しますupdateTypeahead($event)。コールバック関数では、によってDOM要素を取得できますevent.target。

注意：ng-change関数は$ eventを変数として渡すことができません。

イベントをトリガーした要素にアクセスする一般的なAngularの方法は、目的のイベントにディレクティブとbind（）を書き込むことです。

app.directive('myChange', function() {
  return function(scope, element) {
    element.bind('change', function() {
      alert('change on ' + element);
    });
  };
});

またはDDOを使用（@tparteeのコメントに従って）：

app.directive('myChange', function() {
  return { 
    link:  function link(scope, element) {
      element.bind('change', function() {
        alert('change on ' + element);
      });
    }
  }
});

上記のディレクティブは次のように使用できます。

<input id="searchText" ng-model="searchText" type="text" my-change>

プランカー。

テキストフィールドに入力し、そのままにするかぼかします。変更コールバック関数が起動します。そのコールバック関数内では、にアクセスできますelement。

一部の組み込みディレクティブは、$ eventオブジェクトの受け渡しをサポートしています。たとえば、ng- * click、ng-Mouse *。ng-changeはこのイベントをサポートしないことに注意してください。

$ eventオブジェクトを介して要素を取得できますが、

<button ng-click="clickit($event)">Hello</button>

$scope.clickit = function(e) {
    var elem = angular.element(e.srcElement);
    ...

これは「Angular wayに対して深い」-Miskoです。

要素のこの最初の書き込みイベントのように簡単に取得できます

ng-focus="myfunction(this)"

そしてあなたのjsファイルで以下のように

$scope.myfunction= function (msg, $event) {
    var el = event.target
    console.log(el);
}

私もそれを使用しました。

この問題に対して別のディレクティブを作成したくない場合は、コントローラーで$ elementを使用する解決策があります。

appControllers.controller('YourCtrl', ['$scope', '$timeout', '$element',
        function($scope, $timeout, $element) {

    $scope.updateTypeahead = function() {
       // ... some logic here
       $timeout(function() {
           $element[0].getElementsByClassName('search-query')[0].focus();
           // if you have unique id you can use $window instead of $element:
           // $window.document.getElementById('searchText').focus();
       });
    }
}]);

そして、これはng-changeで動作します：

<input id="searchText" type="text" class="search-query" ng-change="updateTypeahead()" ng-model="searchText" />

ng-model値が必要な場合、トリガーされたイベントで次のように記述できる場合：$ scope.searchText

お使いのバージョンはわかりませんが、この質問はずっと前に尋ねられました。現在Angular 1.5では、Lodashのng-keypressイベントとdebounce関数を使用して、のような同様の動作をエミュレートできるため、$ eventをキャプチャできますng-change

<input type="text" ng-keypress="edit($event)" ng-model="myModel">

$ scope.edit = _.debounce（function（$ event）{console.log（ "$ event"、$ event）}、800）

Angular 5でソース要素を渡すには：

<input #myInput type="text" (change)="someFunction(myInput)">