使用模板中的输入替换 html 中指定类型属性的输入时，AngularJS 指令未链接

Question

我遇到了一个非常具体、奇怪的问题。

我们必须对我们的应用程序进行编码以支持 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/ (这是我的第一个 fiddle ，不确定它是否可编辑)

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

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

Answer 1

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

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

我在先看 fiddle 之前写了其余的内容，抱歉。

我使用的是 chromebook，所以我无法测试 IE8，但我记得 IE 对 HTML 属性非常挑剔。您是否尝试过以下任一操作:

• Alternate directive specification ，如数据搜索指令
• 确保指令有一个属性，如 search-directive=""，即使您不使用它
• 模板缓存真的有必要吗？您是否尝试过将模板放入指令的模板属性中？
• 如果没有“use strict”，IE8 是否满意？
• 你见过angular ui bootstrap alternative typeahead吗？ ？至少，看看他们做了什么可能会让您了解如何做您想做的事情。