एंगुलरजेएस बाध्यकारी

Question

के साथ आईई के स्पष्ट बटन को संभालना आईई में प्रत्येक पाठ इनपुट में "एक्स" है जो इनपुट को साफ़ करेगा। हालांकि, इस बटन पर क्लिक करते समय, जब यह टेक्स्टबॉक्स को साफ़ करता है, तो यह कोणीय मॉडल को अद्यतन नहीं करता है कि इनपुट बाध्य है।

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

व्यवहार के उदाहरण के लिए http://jsfiddle.net/p5x1zwr9/ देखें।

व्यवहार के वीडियो के लिए http://youtu.be/LFaEwliTzpQ देखें।

मैं IE 11. उपयोग कर रहा हूँ

संपादित करें: वहाँ नॉकआउट के लिए एक समाधान हो प्रतीत होता है, लेकिन मैं कैसे AngularJS करने के लिए इसे लागू करने के लिए पता नहीं है: Handle IE 9 & 10's clear button with Knockout binding

अद्यतन: जोनाथन सैम्पसन मुझे एहसास हुआ कि यह वास्तव में 1.3.6 से पहले AngularJS संस्करणों में काम करता है, इसलिए यह एक नया कोणीय बग हो सकता है।

अद्यतन: खोला मुद्दा: https://github.com/angular/angular.js/issues/11193

Answer 1

इनपुट रूपों में X बटन के लिए IE10 + निवासी है और आप इसके बारे में कुछ भी नहीं कर सकते हैं, लेकिन केवल सीएसएस के साथ इसे छिपाने: आप

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

फिर इस तरह के व्यवहार की नकल करने के लिए अपना खुद का निर्देश बना सकते हैं। बस एक अवधि बनाएं, इसे इनपुट के अंदर रखें और इसमें एनजी-क्लिक जोड़ें, जो इनपुट के मॉडल मान को साफ़ कर देगा।

Answer 2

जिस समाधान के साथ मैं आया था, वहीं एक्स को हटाने और आपके स्वयं के समाधान को लागू करने जैसे मॉडल को अद्यतन नहीं करता है, यह मुझे आवश्यकतानुसार हल करता है। मैंने जो कुछ किया वह ब्लर को शामिल करने के लिए एनजी-मॉडल-विकल्प जोड़ रहा था। तो जब इनपुट धुंधला हो जाता है तो यह स्कोप मान अपडेट करेगा।

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

Answer 3

मैं इनपुट पाठ तत्व है, जो मैन्युअल रूप से तत्व का परिवर्तन() घटना कॉल स्पष्ट ('एक्स') बटन क्लिक किए जाने के लिए इस कोणीय निर्देश बनाया। इसने हमारी परियोजना पर समस्या तय की। मुझे उम्मीद है कि यह दूसरों की मदद करेगा।

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

स्पष्ट बटन क्लिक पता लगाने के लिए जावा स्क्रिप्ट कोड के लिए इस उत्तर ( Event fired when clearing text input on IE10 with clear icon) करने के लिए धन्यवाद के साथ

।

Answer 4

मैं निम्नलिखित निर्देश का उपयोग करके इसे हल करने में सक्षम था - उपरोक्त 0x783e के उत्तर से व्युत्पन्न। यह कोणीय के बाद के संस्करणों के साथ बेहतर संगतता प्रदान कर सकता है। एनजी-चेंज के अलावा इसे $ घड़ियों या पार्सर्स के साथ काम करना चाहिए।

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

जबकि 'type = पाठ' उपयोग खोज fields.By में 'type = खोज' यह केवल 'के रूप में प्रकार = खोज' चिह्नित आदानों कर के बजाय सीएसएस का उपयोग कर छुपा 'एक्स' लेकिन अन्य इनपुट की ज़रूरत नहीं होगी आईई में कई अन्य क्षेत्रों पर अभी भी 'एक्स' होगा जो आवश्यक है।

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); 

});