Xử lý nút rõ ràng của IE với AngularJS ràng buộc

Question

IE có "X" trong mỗi đầu vào văn bản sẽ xóa đầu vào. Tuy nhiên, khi nhấp vào nút này, trong khi nó xóa hộp văn bản, nó sẽ không cập nhật mô hình Góc mà đầu vào bị ràng buộc.

<input type="text" ng-model="name" /> 

Xem http://jsfiddle.net/p5x1zwr9/ để biết ví dụ về hành vi.

Xem http://youtu.be/LFaEwliTzpQ để biết video về hành vi.

Tôi đang sử dụng trình duyệt IE 11.

EDIT: Có vẻ như là một giải pháp cho Knockout, nhưng tôi không biết làm thế nào để áp dụng nó vào AngularJS: Handle IE 9 & 10's clear button with Knockout binding

UPDATE: Jonathan Sampson đã giúp tôi nhận ra rằng điều này thực sự làm việc trong các phiên bản AngularJS trước 1.3.6 vì vậy đây có thể là một lỗi Góc mới.

UPDATE: vấn đề Khai trương: https://github.com/angular/angular.js/issues/11193

Answer 1

Nút X trong các hình thức đầu vào có nguồn gốc cho IE10 + và bạn không thể làm bất cứ điều gì về nó, nhưng chỉ giấu nó với CSS:

input[type=text]::-ms-clear { 
    display: none; 
} 

Sau đó, bạn có thể tạo ra chỉ thị của riêng bạn để bắt chước loại hành vi này. Chỉ cần tạo một khoảng, vị trí của nó bên trong một đầu vào và thêm ng-click vào nó, mà sẽ xóa giá trị mô hình của đầu vào.

Answer 2

Giải pháp tôi đưa ra, trong khi không cập nhật mô hình ngay lập tức như xóa X và triển khai giải pháp của riêng bạn, Giải pháp cho những gì tôi cần. Tất cả những gì tôi đã làm là thêm ng-model-options để bao gồm blur. Vì vậy, khi đầu vào bị mờ, nó sẽ cập nhật giá trị phạm vi.

<input type="text" ng-model="name" ng-model-options="{ updateOn: 'default blur'}" /> 

Answer 3

Tôi đã tạo chỉ thị Angular này cho các yếu tố văn bản đầu vào, gọi thủ công sự kiện change() của phần tử khi nút (X ') rõ ràng được nhấp. Điều này đã khắc phục được sự cố trong dự án của chúng tôi. Tôi hy vọng nó sẽ giúp người khác.

angular.module('app') 
    .directive('input', function() { 
     return { 
      restrict: 'E', 
      scope: {}, 
      link: function (scope, elem, attrs) { 

       // Only care about textboxes, not radio, checkbox, etc. 
       var validTypes = /^(search|email|url|tel|number|text)$/i; 
       if (!validTypes.test(attrs.type)) return; 

       // Bind to the mouseup event of the input textbox. 
       elem.bind('mouseup', function() { 

        // Get the old value (before click) and return if it's already empty 
        // as there's nothing to do. 
        var $input = $(this), oldValue = $input.val(); 
        if (oldValue === '') return; 

        // Check new value after click, and if it's now empty it means the 
        // clear button was clicked. Manually trigger element's change() event. 
        setTimeout(function() { 
         var newValue = $input.val(); 
         if (newValue === '') { 
          angular.element($input).change(); 
         } 
        }, 1); 
       }); 
      } 
     } 
    }); 

Nhờ có câu trả lời này (Event fired when clearing text input on IE10 with clear icon) cho mã JavaScript để phát hiện nút bấm rõ ràng.

Answer 4

Tôi đã có thể giải quyết điều này bằng cách sử dụng chỉ thị sau - được lấy từ câu trả lời của 0x783e ở trên. Nó có thể cung cấp khả năng tương thích tốt hơn với các phiên bản sau của góc. Nó sẽ làm việc với $ đồng hồ hoặc phân tích cú pháp ngoài ng-thay đổi.

angular 
    .module('yourModuleName') 
    .directive('input', FixIEClearButton); 

FixIEClearButton.$inject = ['$timeout', '$sniffer']; 

function FixIEClearButton($timeout, $sniffer) { 
    var directive = { 
     restrict: 'E', 
     require: '?ngModel', 
     link: Link, 
     controller: function() { } 
    }; 

    return directive; 

    function Link(scope, elem, attr, controller) { 
     var type = elem[0].type; 
     //ie11 doesn't seem to support the input event, at least according to angular 
     if (type !== 'text' || !controller || $sniffer.hasEvent('input')) { 
      return; 
     } 

     elem.on("mouseup", function (event) { 
      var oldValue = elem.val(); 
      if (oldValue == "") { 
       return; 
      } 

      $timeout(function() { 
       var newValue = elem.val(); 
       if (newValue !== oldValue) { 
        elem.val(oldValue); 
        elem.triggerHandler('keydown'); 
        elem.val(newValue); 
        elem.triggerHandler('focus'); 
       } 
      }, 0, false); 
     }); 

     scope.$on('$destroy', destroy); 
     elem.on('$destroy', destroy); 

     function destroy() { 
      elem.off('mouseup'); 
     } 
    } 
} 

Answer 5

Trong khi ẩn sử dụng CSS Thay vì 'type = text' sử dụng 'type = tìm kiếm' trong tìm kiếm fields.By làm điều này chỉ có đầu vào đánh dấu là 'type = tìm kiếm' sẽ không có 'X' nhưng các đầu vào khác vẫn sẽ có 'X' được yêu cầu trên nhiều trường khác trong IE.

input[type=search]::-ms-clear { 
    display: none; 
} 

Answer 6

<input type="text" ng-model="name" id="search" /> 

This solution works for me 

$("#search").bind("mouseup", function(e){ 
    var $input = $(this), 
     oldValue = $input.val(); 

    if (oldValue == "") return; 

    // When this event is fired after clicking on the clear button 
    // the value is not cleared yet. We have to wait for it. 

    setTimeout(function(){ 

    var newValue = $input.val(); 
    if (newValue == ""){ 
$scope.name=""; 
$scope.$apply(); 

    } 
    }, 1); 

});