In the directive in my application, I have text input with a variable binding using ng-model:
<input type="text" class="text-input" ng-change="onInputChange()" ng-model="value" />
In my link function, I set the following:
scope.onInputChange = function() { console.log(scope.value); }; scope.$watch('value', function(value) { console.log(value); }); setInterval(function(){ console.log(scope.value); }, 500);
When I enter into the input field, ng-change and watch never start, and the interval always displays undefined.
Running this directive in a separate application in IE 11 works.
Running this directive in a separate application in Chrome (recent) works.
Running my entire app in Chrome (the last one) works.
What can cause this behavior in my application?
Edit 2:
This situation is apparently caused by webcomponents.js . When this file is included in IE 11, it removes all event listeners from the DOM elements, replacing them with its own dispatchOriginalEvent function. In the specified input field, it cannot replace any of the ordinary event listeners, and therefore, no text input is noticed.
Edit 3:
I narrowed down the problem further with a combination of Angular ng-include and webcomponents.js polyfill for ShadowDOM. So I added a problem on github for webcomponentsjs
EDIT: full directive
'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));
Using:
<give-me-a-reason id="paste-reason" ng-model="importVm.reasonModel" on-change="importVm.reasonChanged(item, valid)"></give-me-a-reason>
EDIT:
The following errors are displayed in the console. They may or may not be related:
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
After examining the above issues, they seem to be related to browsers, and the problem described in this question still occurs without them.