Question

我正在使用基于John Papa的HotTowel的VS 2013项目，使用AngularJs和Breeze构建SPA。

我们拥有Angular，Breeze和BootStrap的所有最新nuget包。我的一个要求是在字段无效时突出显示文本区域（在我们需要的情况下）。此功能已在应用程序中的许多其他字段（主要是输入和选择字段）中实现，并且工作得很好。但是，当我尝试将data-ng-required指令应用于textarea时，我没有得到textarea周围的红色轮廓。

经过一番挖掘后，我通过修改breeze.directives.css文件找到了解决方法：

在：

input:invalid,
select:invalid {
    border: red solid 1px !important;
    border-left: 5px solid red !important;
}
span.z-decorator span.invalid,
input:invalid + .z-decorator > .invalid,
select:invalid + .z-decorator > .invalid {
    visibility: visible;
    display: inline-block;
    background-color: rgb(189, 54, 47);
    margin: 0.3em 0 0 1em;
    padding: 4px 10px;
    -ms-border-radius: 3px 3px 3px 3px !important;
    border-radius: 3px 3px 3px 3px !important;
    background-position: 15px center;
    background-repeat: no-repeat;
    -webkit-box-shadow: 0 0 12px #999999;
    -ms-box-shadow: 0 0 12px #999999;
    box-shadow: 0 0 12px #999999;
    color: #ffffff;
    -ms-opacity: 0.8;
    opacity: 0.8;
    z-index: 20;
}

select:invalid + .z-decorator > .invalid {
    margin: 0.1em 0 0 1em;
}

后：

input:invalid,
textarea:invalid,
select:invalid {
     border: red solid 1px !important;
     border-left: 5px solid red !important;
}
span.z-decorator span.invalid,
input:invalid + .z-decorator > .invalid,
textarea:invalid + .z-decorator > .invalid,
select:invalid + .z-decorator > .invalid {
    visibility: visible;
    display: inline-block;
    background-color: rgb(189, 54, 47);
    margin: 0.3em 0 0 1em;
    padding: 4px 10px;
    -ms-border-radius: 3px 3px 3px 3px !important;
    border-radius: 3px 3px 3px 3px !important;
    background-position: 15px center;
    background-repeat: no-repeat;
    -webkit-box-shadow: 0 0 12px #999999;
    -ms-box-shadow: 0 0 12px #999999;
    box-shadow: 0 0 12px #999999;
    color: #ffffff;
    -ms-opacity: 0.8;
    opacity: 0.8;
    z-index: 20;
}

select:invalid + .z-decorator > .invalid {
    margin: 0.1em 0 0 1em;
}

我只是插入以下内容：＆＃34; textarea的：无效，＆＃34;在每个类的定义中

这给出了我期望的结果，但是，我真的不想修改breeze.directives.css文件，因为下次我们更新breeze文件时这可能会被覆盖。

为防止这种情况，我将css的两个部分复制到custometheme.css文件的底部，我们在其中添加自定义项，然后将其修改为仅指向textarea：invalid。

我的问题是，是否有人知道他们退出此功能的原因？这可能会导致以后的问题吗？

我做了一些相当广泛的研究，以找到解决这个问题的方法，并且无法找到任何与其他人有关的参考资料。

其他人遇到这个？

Answer 1

我担心微风指令更像是一个概念证据。这是他们在Breeze Labs的原因之一。

也就是说，我们接受拉取请求，我不反对添加textarea选择器。

AngularJS with Breeze - 需要时突出显示textarea

1 个答案: