Question

Please consider the following angular application :

df

<!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>

On Chrome and Firefox it works as expected. As we type in the text box its value is bound to the property 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 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)

Answer 1

尝试使用data-disabled="false"代替disabled="false"。

Answer 2

disabled是一个属性，旧浏览器不保留属性的值。

正如您在此处所见：https://github.com/angular/angular.js/issues/351

“问题是较旧的浏览器不保留值布尔属性，例如禁用。这可以防止角度编译器正确检索绑定表达式。这不是一个错误，但角度应该有一个很好的答案。 “

更改其他内容，例如禁用ng禁用数据。

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

2 个答案: