在模板中使用的输入与指定的类型属性来替换HTML的输入时AngularJS指令不链接 [英] AngularJS Directive is not linking when using an input in the template to replace an input in the html with the type attribute specified

问题描述

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

I'm having a really specific, strange issue.

我们必须code我们的应用程序来支持IE8。我们包裹角引导的键盘缓冲指令在模板中封装了一些额外的功能查找小部件。

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)">'

在里面，我们简单地调用替换指令链接功能：真实，传递一些值的范围。

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 =文本关闭一切完美。

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

我创建了一个简单的jsfiddle模仿我们正在与一个非常基本的测试做什么。不幸的是，我的jsfiddle不IE8工作 - 但是这是我们正在做的基本上是什么。这可以在这里找到： http://jsfiddle.net/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.net/lungsponge121/8xGuF/ (this is my first fiddle, not sure if it's editable or not)

与它争抢小时后，我发现以下几点：如果我把HTML作为（INPUT TYPE =文本），我更换标签或它工作正常textarea的指令模板输入元素，但是当我使用输入它不会在所有的工作。我也删除了所有的预输入code从模板，发现IE8仍然无法正常工作。 IE8的控制台什么也没做对我来说，只是给我的标准非法operation.undefined错误。

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.

我曾有人跟我帮我调试我的code和现在我们想知道，如果这是一个错误的工作。有其他人遇到了这个 - 我想提交此向角的人，因为我无法找出如何解决这个问题。

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.

推荐答案

有一件事情跳出我：你的指令是做替代。您使用替换它的模板的标记不具有类型=文，而原始的标记一样。我注意到，更换做了排序合并的，它可能试图合并或替换一些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.

有趣的是，你并不需要在所有使用模板来代替原来的标记。这是一种用途的指令，而不是在我看来，最强大的。以替换掉，并完全删除模板，如果你只是想反正延长预输入。在我自己的项目，比如，我可能把几个不同的指令属性的单个元素上，他们都自行添加额外的功能味现有元素。他们都具有相同的$元素的引用，你就必须要小心，他们并不冲突。

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:

• 备用指令规范，如数据搜索指令


• 确保该指令有一个属性，如搜索指令=，即使你不使用它


• 是模板缓存真的有必要吗？你有没有只是把模板中的指令模板属性尝试这样？


• 是IE8的不快乐用严格的？


• 你见过角UI引导替代预输入？最起码，看着他们确实可以给你怎么做你正在尝试做的想法是什么。

• 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.

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