AngularJS + IE 11 +ポリマー= NG-モデルは、私はNG-モデルを使用してバインド変数を使用してテキスト入力を持って自分のアプリケーション内のディレクティブで

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

私は入力フィールドに入力すると、NG-変化と時計が解雇されることはありませんし、間隔は常に未定義出力。

IE 11のスタンドアロンアプリケーションでこのディレクティブを実行すると動作します。

この命令は、Chrome（最新）のスタンドアロンアプリケーションで実行してください。

Chrome（最新）で私のアプリケーション全体を動作させます。

私のアプリケーションでこの現象が発生する可能性があります。

編集2：

この状況はwebcomponents.jsによって引き起こされているように見えます。このファイルがIE 11に含まれていると、DOMエレメントからすべてのイベントリスナーが削除され、自身のdispatchOriginalEvent機能で置き換えられます。指定された入力フィールドでは、通常のイベントリスナーのいずれかを置き換えることができないため、テキスト入力は通知されません。

編集3：

私は角のNG-含めるとShadowDOM用ポリフィルをwebcomponents.jsの組み合わせに問題をさらに絞り込むました。 Iゆえ

EDIT webcomponentsjsためgithubインスタンスに問題を追加しました：全ディレクティブ

'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> 

EDIT：

次のエラーが表示されますコンソールで彼らは、または関連してもしなくてもよい。

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

これは私のために正常に動作しています。以下の実施例を参照してください：予備試験として

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>