CODEWITHSUNDEEP
javascriptangularjsinternet-explorerdata-binding
Daniel Melo
Daniel Melo

Reputation: 551

Two-way databinding does not work with custom directives in Internet Explorer 9

Please consider the following 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() {
});

On Chrome and Firefox it works as expected. As we type in the text box its value is bound to the property ctrl.item.value.

On Internet Explorer 9 the two-way databinding doesn't work.

If I use the text box directly, without a custom directive, it does work as expected on all browsers.

Why doesn't it work on Internet Explorer 9?

Plunkr (Note : It seems Plunkr itself doesn't work on IE9)

Upvotes: 0

Views: 366

Answers (2)

&#193;bner Oliveira
&#193;bner Oliveira

Reputation: 306

disabled is a attribute and old browser does not preserve the value of the attribute.

As you can see here: https://github.com/angular/angular.js/issues/351

"The issue is that the older browser do not preserve the value boolean attributes such as disabled. This prevents the angular compiler from correctly retrieving the binding expression. This is not a bug per say, but angular should have a good answer."

Change for something else, like data-disabled on ng-disabled.

Upvotes: 1

Szabolcs D&#233;zsi
Szabolcs D&#233;zsi

Reputation: 8843

Try using data-disabled="false" instead of disabled="false".

Upvotes: 1

Related Questions