AngularJS 指令在使用模板中的输入将 html 中的输入替换为指定的 type 属性时未链接

本文介绍了AngularJS 指令在使用模板中的输入将 html 中的输入替换为指定的 type 属性时未链接的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

限时送ChatGPT账号..

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

I'm having a really specific, strange issue.

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

We have to code our app to support IE8. We are wrapping the Angular-Bootstrap's Typeahead directive in a template to encapsulate a lookup widget with some extra functionality.

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

The issue we're having is that our directive template looks like this:

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

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

Inside the link function in the directive we are simply calling replace: true and passing in some values to the scope.

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

This works beautifully in both IE8 and Chrome.

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

Now, the REALLY strange part is that, for IE8 only, if we say in the HTML in which we're using the directive:

<input type="text" search-directive>

它永远不会进入链接功能.如果我取消 type="text" 一切正常.

It will not ever get into the link function. If i take the type="text" off everything works perfectly.

我创建了一个简单的 JSFiddle 来模拟我们正在做的一个非常基本的测试.不幸的是，JSFiddle 在 IE8 中不起作用 - 但这基本上是我们正在做的.这可以在这里找到:http://jsfiddle/lungsponge121/8xGuF/(这是我的第一个小提琴，不确定它是否可编辑)

I created a simple JSFiddle to mimic what we're doing with a really basic test. Unfortunately for me the JSFiddle doesn't work in IE8 - but this is basically what we're doing. This can be found here: http://jsfiddle/lungsponge121/8xGuF/ (this is my first fiddle, not sure if it's editable or not)

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

After fighting with it for hours I've found the following: if i keep the html as (input type="text") and i replace the directive template input element with label or textarea it works fine, but when i use input it does not work at all. I also removed all of the typeahead code from the template and found that in IE8 it still doesn't work. The IE8 console did nothing for me and just gave me the standard illegal operation.undefined error.

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

I had somebody I work with help me debug my code and right now we're wondering if this is a bug. Has anybody else run into this - I'm thinking of submitting this to the Angular people as I can't find out how to get around this.

推荐答案

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

One thing jumped out at me: your directive is doing replace. The markup of the template you are replacing it with does not have the type="text", whereas the original markup does. I have noticed that replace does a sort of merge, and it may be getting confused when trying to merge or replace some HTML that has an attribute with a template that does not.

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

Interestingly, you don't really need to replace the original markup with a template at all. That is one use of directives, but not the most powerful in my opinion. Take "replace" off and remove the template entirely, if you're just trying to extend the typeahead anyway. In my own projects, for example, I might put several different directives attributes on a single element and they all add their own flavor of extra functionality to the existing element. All of them have a reference to the same $element, you just have to be careful that they don't conflict.

在我先看小提琴之前，我写了剩下的部分，抱歉.

I wrote the rest of this before I looked at the fiddle first, sorry.

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

I'm on a chromebook so I can't test the IE8 thing, but if I recall IE is very picky about HTML attributes. Have you tried any of the following:

替代指令规范，如 data-search-directive确保指令有一个属性，如search-directive=""，即使你不使用它模板缓存真的有必要吗?您是否尝试过将模板放在指令的模板属性中?没有严格使用"的 IE8 会开心吗?您是否看过 angular ui bootstrap 替代 typeahead?至少，看看他们的所作所为可能会让您知道如何去做您正在尝试做的事情. Alternate directive specification, as in data-search-directive Make sure the directive has a property, as in search-directive="", even if you don't use it Is the template cache really necessary? Have you tried this just by putting the template in a template property of the directive? Is IE8 happy without "use strict"? Have you seen the angular ui bootstrap alternative typeahead? At the very least, looking at what they did may give you ideas of how to do what you are trying to do.

这篇关于AngularJS 指令在使用模板中的输入将 html 中的输入替换为指定的 type 属性时未链接的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！