Wie kann man in anglejs auf das Element zugreifen, das das Ereignis ausgelöst hat?

Ich verwende sowohl Bootstrap als auch AngularJS in meiner Web-App. Ich habe einige Schwierigkeiten, die beiden zusammenzubringen.

Ich habe ein Element, das das Attribut hat data-provide="typeahead"

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

Und ich möchte das data-sourceAttribut aktualisieren , wenn der Benutzer in das Feld eingibt. Die Funktion updateTypeaheadwird korrekt ausgelöst, aber ich habe keinen Zugriff auf das Element, das das Ereignis ausgelöst hat, es sei denn, ich verwende $('#searchText')den jQuery-Weg, nicht den AngularJS-Weg.

Was ist der beste Weg, um AngularJS dazu zu bringen, mit JS-Modulen alten Stils zu arbeiten?

 updateTypeahead(this)

Übergibt das DOM-Element nicht an die Funktion updateTypeahead(this). Hier thiswird auf den Umfang verwiesen. Wenn Sie auf das DOM-Element zugreifen möchten, verwenden Sie updateTypeahead($event). In der Rückruffunktion können Sie das DOM-Element von abrufen event.target.

Bitte beachten Sie: Mit der ng-change-Funktion kann $ event nicht als Variable übergeben werden.

Der allgemeine Angular-Weg, um Zugriff auf ein Element zu erhalten, das ein Ereignis ausgelöst hat, besteht darin, eine Direktive zu schreiben und () an das gewünschte Ereignis zu binden:

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

oder mit DDO (gemäß dem Kommentar von @ tpartee unten):

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

Die obige Richtlinie kann wie folgt verwendet werden:

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

Plunker .

Geben Sie in das Textfeld ein und lassen Sie / unscharf. Die Rückruffunktion wird ausgelöst. Innerhalb dieser Rückruffunktion haben Sie Zugriff auf element.

Einige integrierte Anweisungen unterstützen die Übergabe eines $ event-Objekts. ZB ng- * click, ng-Mouse *. Beachten Sie, dass ng-change dieses Ereignis nicht unterstützt.

Obwohl Sie das Element über das $ event-Objekt erhalten können:

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

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

das geht "tief gegen den Winkelweg" - Misko .

Sie können leicht wie dieses erste Schreibereignis auf Element bekommen

ng-focus="myfunction(this)"

und in Ihrer js-Datei wie unten

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

Ich habe es auch benutzt.

Es gibt eine Lösung mit $ element im Controller, wenn Sie keine weitere Direktive für dieses Problem erstellen möchten:

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();
       });
    }
}]);

Und das wird mit ng-change funktionieren :

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

Wenn Sie einen Modellwert möchten, können Sie im ausgelösten Ereignis wie folgt schreiben: $ scope.searchText

Ich bin nicht sicher, welche Version Sie hatten, aber diese Frage wurde vor langer Zeit gestellt. Derzeit kann ich mit Angular 1.5 das ng-keypressEreignis und die debounceFunktion von Lodash verwenden , um ein ähnliches Verhalten wie zu emulieren ng-change, sodass ich das $ -Ereignis erfassen kann

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

$ scope.edit = _.debounce (Funktion ($ event) {console.log ("$ event", $ event)}, 800)

So übergeben Sie das Quellelement in Winkel 5:

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