带有验证、ngModel和ngClass的AngularJS指令模板仅在包装模板时有效



使用Misko的答案作为模板,我实现了一个指令,该指令为twitter引导表单控件提供了模板。

这个Plunker示例有两个相同的指令,只是第一个指令在模板中有一个额外的div包装器。

为什么"has-error"类只应用于第一个指令而不应用于第二个指令?如果我将包装div添加到第二个指令模板中,它会突然开始工作。这个包装的意义是什么?

我还看到验证类ng原始ng无效ng无效必需等正确应用于表单元素,但也应用于指令模板中的顶级div,为什么?

猜测问题出在哪里-Angular正在向第一个包装div添加验证类。在第一个中,这个只是一个空的包装器,额外的验证类不会引起任何问题。第二个已经在第一个包装器div中同时具有class和ng类属性,Angular添加验证类会覆盖或与ng类规则冲突,导致它们无法运行,并且"有错误"无法应用。不过,我不确定是否有比只保留包装器div更好的解决方案。

最新更新