AngularJS + IE 11 + Polymer = ng mô hình không cập nhật

Question

Trong một chỉ thị trong ứng dụng của tôi, tôi có một đầu vào văn bản với một biến ràng buộc sử dụng ng mô hình:

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

tôi đã thiết lập sau đây trong chức năng liên kết của tôi:

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

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

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

Khi tôi nhập vào trường nhập, thay đổi ng và đồng hồ sẽ không bao giờ được kích hoạt và khoảng thời gian luôn là đầu ra không xác định.

Chạy chỉ thị này trong một ứng dụng độc lập trong IE 11 hoạt động.

Chạy chỉ thị này trong một ứng dụng độc lập trong Chrome (mới nhất) hoạt động.

Chạy toàn bộ ứng dụng của tôi trong Chrome (mới nhất) hoạt động.

Điều gì trong ứng dụng của tôi có thể gây ra hành vi này?

Chỉnh sửa 2:

Tình trạng này dường như đã được gây ra bởi webcomponents.js. Khi tệp này được bao gồm trong IE 11, nó loại bỏ tất cả các trình lắng nghe sự kiện từ các phần tử DOM, thay thế chúng bằng hàm dispatchOriginalEvent riêng của nó. Trên trường đầu vào được chỉ định, nó không thể thay thế bất kỳ trình lắng nghe sự kiện bình thường nào và vì vậy bất kỳ đầu vào văn bản nào cũng không được chú ý.

Sửa 3:

tôi đã thu hẹp xuống vấn đề hơn nữa để sự kết hợp của góc của ng-bao gồm và webcomponents.js polyfill cho ShadowDOM. Vì vậy, tôi đã thêm một vấn đề với github dụ cho webcomponentsjs

EDIT: Toàn thị

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

Cách sử dụng:

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

EDIT:

Các lỗi sau xuất hiện trong bảng điều khiển. Chúng có thể có hoặc không liên quan:

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 

Sau khi khám phá các vấn đề trên, chúng dường như liên quan đến browserync và sự cố được mô tả trong câu hỏi này vẫn xảy ra mà không có chúng.

Answer 1

vượt qua giá trị trong chức năng của bạn

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

Answer 2

Di ng-change từ input của bạn và sửa đổi mã chỉ thị của bạn như thế này:

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

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

này đang làm việc tốt cho tôi.Xem ví dụ làm việc dưới đây:

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>