AngularJS + IE 11 + पॉलिमर = एनजी मॉडल

Question

अपडेट नहीं हो एक निर्देश अपने आवेदन में मैं एक चर एनजी-मॉडल का उपयोग कर के लिए बाध्य के साथ एक पाठ इनपुट में:

<input type="text" class="text-input" ng-change="onInputChange()" ng-model="value" /> 

मैं में निम्नलिखित सेट कर लेते हैं मेरी लिंक समारोह:

scope.onInputChange = function() { 
    console.log(scope.value); 
}; 

scope.$watch('value', function(value) { 
    console.log(value); 
}); 

setInterval(function(){ 
    console.log(scope.value); 
}, 500); 

मैं इनपुट क्षेत्र में लिखते हैं, एनजी-परिवर्तन और घड़ी निकाल दिया कभी नहीं कर रहे हैं और अंतराल हमेशा अपरिभाषित आउटपुट।

आईई 11 कार्यों में एक स्टैंडअलोन एप्लिकेशन में इस निर्देश को चला रहा है।

क्रोम (नवीनतम) कार्यों में एक स्टैंडअलोन एप्लिकेशन में इस निर्देश को चला रहा है।

क्रोम (नवीनतम) कार्यों में मेरा पूरा एप्लिकेशन चला रहा है।

मेरे आवेदन में इस व्यवहार के कारण क्या हो सकता है?

संपादित करें 2:

यह स्थिति webcomponents.js के कारण किया गया है प्रकट होता है। जब यह फ़ाइल आईई 11 में शामिल की जाती है, तो यह सभी ईवेंट श्रोताओं को डीओएम तत्वों से हटा देती है, जो उन्हें अपने dispatchOriginalEvent फ़ंक्शन के साथ बदल देती है। निर्दिष्ट इनपुट फ़ील्ड पर, यह किसी भी सामान्य ईवेंट श्रोताओं को प्रतिस्थापित करने में विफल रहता है और इसलिए कोई भी टेक्स्ट इनपुट नहीं देखा जाता है।

संपादित करें 3:

मैं कोणीय के संयोजन के लिए आगे समस्या को संकुचित होता गया है एनजी-शामिल हैं और ShadowDOM के लिए polyfill webcomponents.js। पूर्ण निर्देश

'use strict'; 

(function(angular) { 

    angular.module('givemeareason', [ 
     'config' 
    ]); 

    angular.module('givemeareason') 
     .directive('giveMeAReason', ['$timeout', 'AppConfig', function($timeout, Appconfig) { 
      return { 
       restrict: 'EA', 
       replace : true, 
       template: '<div class="give-me-a-reason">' + 
        '<input type="text" class="reason" ng-change="onInputChange()" ng-model="reason" />' + 
        '</div>', 
       require : 'ngModel', 
       scope : { 
        onChange: '&' 
       }, 
       link : function(scope, elm, attrs, ngModelContoller) { 
        scope.onInputChange = function() { 
         scope.onChange({ 
          item: {reason: scope.reason}, 
          valid: typeof scope.reason === 'string' && scope.reason.length > 0 
         }); 
        }; 

        scope.$watch('reason', function(reason) { 
         console.log(reason); 
        }); 

        setInterval(function(){ 
         console.log(scope.reason); 
        }, 500); 
       } 
      }; 
     }]); 
    }(window.angular)); 

उपयोग::

<give-me-a-reason id="paste-reason" ng-model="importVm.reasonModel" on-change="importVm.reasonChanged(item, valid)"></give-me-a-reason> 

संपादित करें:

निम्न त्रुटियों दिखाई इसलिए मैं

संपादित webcomponentsjs के लिए github उदाहरण के लिए एक मुद्दा जोड़ लिया है कंसोल में। वे या नहीं संबंधित हो सकता है हो सकता है:

Object doesn't support property or method 'animate'. File: web-animations.min.js, Line 16, Column: 11207 
Assertion failed. File: webcomponents.js, Line: 116, Column: 15 

मुद्दों पर खोज के बाद, वे browsersync से संबंधित होना दिखाई देते हैं और इस मुद्दे को इस सवाल में वर्णित अभी भी उन्हें बिना होता है।

Answer 1

अपने कार्य में मान पास

<input type="text" class="text-input" ng-change="onInputChange(value)" ng-model="value" /> 

Answer 2

अपने input से ng-change निकालें और इस तरह अपने निर्देश कोड को संशोधित:

scope.onInputChange = function() { 
    scope.onChange({ 
     item: {reason: scope.reason}, 
     valid: typeof scope.reason === 'string' && scope.reason.length > 0 
    }); 
}; 

scope.$watch('reason', scope.onInputChange); 

यह मेरे लिए ठीक काम कर रहा है।`कोशिश एनजी मॉडल =" $ parent.value "`

angular.module('givemeareason', []); 
 

 
angular.module('givemeareason') 
 
    .controller("foocontroller", function($scope) { 
 
    var vm = this; 
 
    vm.reasonChanged = function(item, valid) { 
 
     console.log("In the controller", item, valid); 
 
    } 
 
    }); 
 

 
angular.module('givemeareason') 
 
    .directive('giveMeAReason', ['$timeout', 
 
    function($timeout) { 
 
     return { 
 
     restrict: 'EA', 
 
     replace: true, 
 
     template: '<div class="give-me-a-reason">' + 
 
      '<input type="text" class="reason" ng-model="reason" />' + 
 
      '</div>', 
 
     require: 'ngModel', 
 
     scope: { 
 
      onChange: '&' 
 
     }, 
 
     link: function(scope, elm, attrs, ngModelContoller) { 
 
      scope.onInputChange = function() { 
 
      console.log("Changed value", scope.reason); 
 

 
      scope.onChange({ 
 
       item: { 
 
       reason: scope.reason 
 
       }, 
 
       valid: typeof scope.reason === 'string' && scope.reason.length > 0 
 
      }); 
 
      }; 
 

 
      scope.$watch('reason', scope.onInputChange); 
 
     } 
 
     }; 
 
    } 
 
    ]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 

 
<div ng-app="givemeareason" ng-controller="foocontroller as importVm"> 
 
    <give-me-a-reason id="paste-reason" ng-model="importVm.reasonModel" on-change="importVm.reasonChanged(item, valid)"></give-me-a-reason> 
 
</div>