ใน angularjs จะเข้าถึงองค์ประกอบที่เรียกเหตุการณ์ได้อย่างไร?

ฉันใช้ทั้ง Bootstrap และ AngularJS ในเว็บแอปของฉัน ฉันมีปัญหาในการทำให้ทั้งสองคนทำงานร่วมกัน

ฉันมีองค์ประกอบซึ่งมีแอตทริบิวต์ 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')ซึ่งเป็นวิธี jQuery ไม่ใช่วิธี AngularJS

วิธีใดที่ดีที่สุดในการทำให้ AngularJS ทำงานกับโมดูล JS แบบเก่า

 updateTypeahead(this)

จะไม่ผ่านองค์ประกอบ DOM updateTypeahead(this)เพื่อฟังก์ชั่น ในที่thisนี้จะกล่าวถึงขอบเขต หากคุณต้องการที่จะเข้าถึงการใช้องค์ประกอบ DOM updateTypeahead($event)ในฟังก์ชั่นการโทรกลับที่คุณจะได้รับองค์ประกอบ DOM event.targetโดย

โปรดทราบ: ฟังก์ชัน ng-change ไม่อนุญาตให้ส่ง $ event เป็นตัวแปร

วิธีทั่วไปเชิงมุมในการเข้าถึงองค์ประกอบที่ทำให้เกิดเหตุการณ์คือการเขียนคำสั่งและผูก () ไปยังเหตุการณ์ที่ต้องการ:

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>

Plunker .

พิมพ์ลงในช่องข้อความจากนั้นปล่อย / เบลอ ฟังก์ชันการโทรกลับการเปลี่ยนแปลงจะเริ่มทำงาน ภายในฟังก์ชันการโทรกลับคุณสามารถเข้าถึงelementได้

คำสั่งในตัวบางคำสั่งรองรับการส่งผ่านวัตถุ $ เหตุการณ์ เช่น ng- * click, ng-Mouse * โปรดทราบว่า ng-change ไม่รองรับเหตุการณ์นี้

แม้ว่าคุณจะได้รับองค์ประกอบผ่านทาง $ event object:

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

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

นี้ไป "ลึกกับทางเชิงมุม" - Misko

คุณจะได้รับอย่างง่ายดายเช่นเหตุการณ์เขียนครั้งแรกนี้ในองค์ประกอบ

ng-focus="myfunction(this)"

และในไฟล์ js ของคุณเช่นด้านล่าง

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

ฉันได้ใช้มันเช่นกัน

มีวิธีแก้ไขโดยใช้องค์ประกอบ $ ในคอนโทรลเลอร์หากคุณไม่ต้องการสร้างคำสั่งอื่นสำหรับปัญหานี้:

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 ฉันสามารถใช้ng-keypressเหตุการณ์และdebounceฟังก์ชันจากLodashเพื่อเลียนแบบพฤติกรรมที่คล้ายกันng-changeได้ดังนั้นฉันจึงสามารถจับภาพเหตุการณ์ $ ได้

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

$ scope.edit = _.debounce (ฟังก์ชัน ($ event) {console.log ("$ event", $ event)}, 800)

ในการส่งผ่านองค์ประกอบต้นทางใน Angular 5:

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