AngularJS + IE 11 + Polymer = ng-model不更新

Question

在我的應用程序的指令中，我有一個使用ng-model綁定變量的文本輸入：

<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-change和watch，並且間隔始終輸出undefined。

在IE 11中的獨立應用程序中運行此指令。

在Chrome中的獨立應用程序中運行此指令（最新）有效。

在Chrome中運行我的整個應用程序（最新）有效。

我的應用程序可能導致此行為？

編輯2：

這種情況似乎是由webcomponents.js引起的。 當這個文件包含在IE 11中時，它會從DOM元素中刪除所有事件偵聽器，並用它自己的dispatchOriginalEvent函數替換它們。 在指定的輸入字段上，它無法替換任何正常的事件偵聽器，因此不會注意到任何文本輸入。

編輯3：

我已經將問題進一步縮小到Angular的ng-include和webcomponents.js polyfill for ShadowDOM的組合。 因此，我向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>

編輯：

控制台中顯示以下錯誤。 它們可能相關也可能不相關：

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>