Take a look at this unique angular application :
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"></script>
<link href="style.css" rel="stylesheet" />
<script src="script.js"></script>
</head>
<body ng-app="app">
<div ng-controller="someController as ctrl">
<simple-directive item="ctrl.item" disabled="false"></simple-directive>
<pre>{{ctrl.item | json}}</pre>
</div>
</body>
var app = angular.module('app', []);
app.directive('simpleDirective', function() {
return {
scope : {
item : '=',
disabled : '='
},
template : '<input type="text" ng-model="item.value" ng-disabled="disabled" />'
};
});
app.controller('someController', function() {
});
The angular app functions correctly on Chrome and Firefox. It successfully binds the text box value to ctrl.item.value.
However, Internet Explorer 9 does not support the two-way data binding feature.
Interestingly, if the custom directive is removed and just using the text box alone, it works fine on all browsers.
Why does IE9 have issues with the custom directive? Dive into the code further to find out.
Plunkr Demo (Note : Plunkr might not work on IE9)