javascript - 双向数据绑定(bind)不适用于 Internet Explorer 9 中的自定义指令

标签 javascript angularjs internet-explorer data-binding

请考虑以下 Angular 应用:

<!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() {
});

在 Chrome 和 Firefox 上,它按预期工作。当我们在文本框中键入内容时,其值将绑定(bind)到属性 ctrl.item.value

在 Internet Explorer 9 上,双向数据绑定(bind)不起作用。

如果我直接使用文本框而不使用自定义指令,它确实可以在所有浏览器上按预期工作。

为什么它不能在 Internet Explorer 9 上运行?

Plunkr (注意:Plunkr 本身似乎无法在 IE9 上运行)

最佳答案

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

正如您在这里看到的:https://github.com/angular/angular.js/issues/351

“问题在于旧版浏览器不保留值 bool 属性,例如禁用。这会阻止 Angular 编译器正确检索绑定(bind)表达式。这并不是一个错误,但 Angular 应该有一个很好的答案。 ”

更改其他内容,例如 ng-disabled 上的 data-disabled。

关于javascript - 双向数据绑定(bind)不适用于 Internet Explorer 9 中的自定义指令,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35372920/

相关文章:

javascript - 需要帮助理解 Angular ui-router 专门将 mongodb 数据从一个状态传递到另一个状态吗?

javascript - 我想从组合框获取搜索表单的值

angularjs - sails 无法从 Angular 标签后的请求中读取 GET 参数

html - 背景颜色和子菜单在 IE 中不断切换悬停状态

CSS属性 "overflow: scroll"无法在IE 11中显示滚动条

javascript - 如何创建 3 个可调整的 div?

javascript - 如何将 URL 作为 <object> 数据中的变量传递?

html - 如何使用 angularJS 显示模态弹出窗口?

html - 如何拉伸(stretch)图像以覆盖 div 的整个宽度和高度? (使用 flex 盒)

internet-explorer - Internet Explorer 版本后缀 : CO