trong anglejs làm cách nào để truy cập phần tử đã kích hoạt sự kiện?

Tôi sử dụng cả Bootstrap và AngularJS trong ứng dụng web của mình. Tôi đang gặp một số khó khăn để cả hai làm việc cùng nhau.

Tôi có một phần tử, có thuộc tính data-provide="typeahead"

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

Và tôi muốn cập nhật data-sourcethuộc tính khi người dùng nhập vào trường. Hàm updateTypeaheadđược kích hoạt đúng cách, nhưng tôi không có quyền truy cập vào phần tử đã kích hoạt sự kiện, trừ khi tôi sử dụng $('#searchText'), đó là cách jQuery, không phải cách AngularJS.

Cách tốt nhất để AngularJS hoạt động với mô-đun JS kiểu cũ là gì.

 updateTypeahead(this)

sẽ không chuyển phần tử DOM cho hàm updateTypeahead(this). Ở đây thissẽ đề cập đến phạm vi. Nếu bạn muốn truy cập sử dụng phần tử DOM updateTypeahead($event). Trong hàm gọi lại, bạn có thể lấy phần tử DOM bằng cách event.target.

Xin lưu ý: hàm ng-change không cho phép chuyển $ event làm biến.

Cách Angular chung để có quyền truy cập vào một phần tử đã kích hoạt một sự kiện là viết một chỉ thị và bind () với sự kiện mong muốn:

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

hoặc với DDO (theo nhận xét của @ tpartee bên dưới):

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

Chỉ thị trên có thể được sử dụng như sau:

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

Thợ đào móng .

Nhập vào trường văn bản, sau đó để lại / làm mờ. Chức năng gọi lại thay đổi sẽ kích hoạt. Bên trong chức năng gọi lại đó, bạn có quyền truy cập element.

Một số chỉ thị tích hợp hỗ trợ truyền một đối tượng $ event. Vd: ng- * click, ng- Mouse *. Lưu ý rằng ng-change không hỗ trợ sự kiện này.

Mặc dù bạn có thể lấy phần tử thông qua đối tượng $ event:

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

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

Điều này đi ngược lại với cách Angular - Misko .

bạn có thể dễ dàng nhận được như sự kiện viết đầu tiên này trên phần tử

ng-focus="myfunction(this)"

và trong tệp js của bạn như bên dưới

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

Tôi cũng đã sử dụng nó.

Có một giải pháp sử dụng $ element trong controller nếu bạn không muốn tạo một chỉ thị khác cho sự cố này:

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

Và điều này sẽ hoạt động với ng-change :

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

nếu bạn muốn giá trị ng-model, nếu bạn có thể viết như thế này trong sự kiện được kích hoạt: $ scope.searchText

Tôi không chắc bạn đã có phiên bản nào, nhưng câu hỏi này đã được hỏi từ lâu. Hiện tại với Angular 1.5, tôi có thể sử dụng ng-keypresssự kiện và debouncechức năng từ Lodash để mô phỏng hành vi tương tự như ng-changevậy, vì vậy tôi có thể nắm bắt sự kiện $

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

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

Để chuyển phần tử nguồn trong Angular 5:

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