3

我有一个非常具体，奇怪的问题。

我们必须编写我们的应用程序以支持 IE8。我们将 Angular-Bootstrap 的 Typeahead 指令包装在模板中，以封装具有一些额外功能的查找小部件。

我们遇到的问题是我们的指令模板如下所示：

'<input ng-model="typeaheadValue" typeahead="xxx.code as formatXxx(xxx) for xxx in searchXxxs($viewValue)">'

在指令中的链接函数中，我们只是调用 replace: true 并将一些值传递给作用域。

这在 IE8 和 Chrome 中都能很好地工作。

现在，真正奇怪的是，仅对于 IE8，如果我们在使用该指令的 HTML 中说：

<input type="text" search-directive>

它永远不会进入链接功能。如果我把 type="text" 去掉，一切都会完美。

我创建了一个简单的 JSFiddle 来模仿我们正在做的一个非常基本的测试。对我来说不幸的是，JSFiddle 在 IE8 中不起作用——但这基本上就是我们正在做的事情。这可以在这里找到：http: //jsfiddle.net/lungsponge121/8xGuF/（这是我的第一个小提琴，不确定它是否可编辑）

在与它斗争了几个小时后，我发现了以下内容：如果我将 html 保留为 (input type="text") 并且我将指令模板输入元素替换为 label 或 textarea 它工作正常，但是当我使用输入时它会根本不工作。我还从模板中删除了所有的 typeahead 代码，发现在 IE8 中它仍然不起作用。IE8 控制台对我没有任何作用，只是给了我标准的非法操作。未定义的错误。

我有一个与我一起工作的人帮助我调试我的代码，现在我们想知道这是否是一个错误。有没有其他人遇到过这个问题 - 我正在考虑将这个提交给 Angular 人员，因为我不知道如何解决这个问题。

4

1 回答 1

1

我突然想到一件事：您的指令正在替换。您要替换它的模板的标记没有 type="text"，而原始标记有。我注意到 replace 会进行某种合并，当尝试将某些具有属性的 HTML 合并或替换为没有属性的模板时，它可能会感到困惑。

有趣的是，您根本不需要用模板替换原始标记。这是指令的一种用法，但在我看来不是最强大的。如果您只是想扩展预输入，请关闭“替换”并完全删除模板。例如，在我自己的项目中，我可能会将几个不同的指令属性放在一个元素上，它们都会为现有元素添加自己的额外功能。它们都引用了同一个 $element，你只需要小心它们不要冲突。

在我先看小提琴之前，我写了剩下的部分，对不起。

我在 chromebook 上，所以我无法测试 IE8，但如果我记得 IE 对 HTML 属性非常挑剔。您是否尝试过以下任何一种方法：

  • 替代指令规范，如 data-search-directive
  • 确保指令具有属性，如 search-directive=""，即使您不使用它
  • 模板缓存真的有必要吗？您是否只是通过将模板放在指令的模板属性中来尝试过这个？
  • 没有“使用严格”，IE8 会快乐吗？
  • 你见过angular ui bootstrap 替代 typeahead吗？至少，看看他们做了什么可能会让你知道如何去做你想做的事。
于 2013-06-02T22:49:20.513 回答