AngularJS 指令 - 为什么浏览器会报告 DOM 异常？答案

【问题标题】：AngularJS directive - why do the browsers report DOM exceptions with this?AngularJS 指令 - 为什么浏览器会报告 DOM 异常？
【发布时间】：2013-10-09 12:35:34
【问题描述】：

我创建了一个用于处理二进制文件上传的指令。这是一个使用它的plunker：

http://plnkr.co/edit/9qcKW5A6yq1hS8OuWTNK?p=preview

这个想法是模型由控制器初始化（最初）只是当前文件名 - 而不是当前数据。

如果用户点击链接，数据将被下载到他的机器上。
如果用户单击“-”按钮，模型的文件数据和文件名部分都将设置为未定义。
如果用户单击“+”并选择他自己的文件，模型将获得一个新的文件名，以及相关文件的数据（base64 格式）。现在，如果您这样做，并查看浏览器的控制台，您会发现在 Chrome 和 Firefox 中，都报告了一个非常奇怪的错误（来自 Angular 的内部），关于访问我们不允许的内容。 Firefox 甚至特别提到了安全性。

阻止错误被报告，而不是分配

model.filedata = values;

试试

model.filedata = '';

...确实，错误消失了。这很奇怪——浏览器似乎在保持某种关于“values”中包含的 base64 数据字符串的状态，并且 Angular 在其内部观察者中触摸它时存在问题。

这是我这边的错误，Angular 方面的错误，还是浏览器方面的错误？

非常感谢任何帮助。

【问题讨论】：

标签： html angularjs input angularjs-directive angularjs-scope

【解决方案1】：

在你的 script.js 的第 15 行它说：

'       type="file" data-ng-model="model.filedata" />' +

ng-model 在 scope.model.filedata 和输入元素的“值”之间建立双向数据绑定。当您使用 ... 更新 model.filedata 时

model.filedata = values;

... Angular 尝试更新输入元素的“值”，但失败了。

我不明白为什么你的输入元素需要这个 ng-model。通过删除它，您的代码就可以工作了。

【讨论】：

你是对的！这是我之前尝试的遗留问题。谢谢。

【解决方案2】：

这不是错误。

问题是您将模型绑定到文件输入。 (data-ng-model="model.filedata")

这意味着一旦您更改了filedata，Angular 将尝试更新文件输入的值。

出于安全原因，没有浏览器允许以编程方式设置文件输入的值。
（否则我可以使用密码设置系统上本地文件的路径并强制上传到我的服务器）

只需删除绑定，它就会按预期工作 (demo)

（很可能您打算将其绑定到model.filename 而不是model.filedata，尽管它会产生相同的异常..）

【讨论】：