AngularJs中的警告

Question

Angularjs具有很好的表单验证和显示错误消息的基础结构.但是,我处于一种情况,我必须在特定情况下向用户显示警告消息.这是我简单表格的图表

表单已在两个字段上应用了必需和模式验证.除了这个验证之外,我想要向用户显示一条警告消息,如果VatAmount不是20%的话InvoiceAmount.警告将在以下方面与验证不同

1. 它不会阻止表单提交
2. 只有两个字段(InvoiceAmount和VATAmount)都有效时才会出现
3. 警告应该有一个按钮或链接,显示"更改并继续".当用户按下该按钮时,警告消息将隐藏,焦点将设置为VATAmount字段.

我相信这是创建指令的完美用例.实际上,我试了一下,把我的努力放在了一个吸血鬼的形式.但我的指令不处理以下情况

1. 即使警告中涉及的字段无效,也会显示
2. 显示和隐藏功能未实现(不知道如何定位)

这是与plunker的链接

Answer 1

你的 plunkr 演示走在正确的轨道上；实际上，您只需要检查其中一个值是否为空的特殊情况。

我建议计算分数并将其存储在范围中，然后观察以查看是否应该显示税率警告。以下是计算分数的方法。如果 或invoice.Amount为invoice.VAT空，则分数将设置为null。

if (amt == null || vat == null) {
    $scope.warning.fraction = null;
    return;
}
$scope.warning.fraction = vat / amt;

这是有效的，因为undefined如果用户由于使用ng-pattern.

然而，虽然将其封装在指令中很好，但您不需要自己编译模板。只需使用内置ng-transclude指令即可。然后您可以包含一个引用当前范围的按钮，如下所示：

     <vat-warning>
       Vat Amount is not 20%.
       <button ng-click="invoice.VAT = invoice.Amount / 5">change</button>
     </vat-warning>

您的指令将包含此声明：

    transclude: true,
    template: '<span class="alert-warning" ng-show="warning.show" ng-transclude></span>'

加上一个控制器来更新指令的本地范围来操作warning对象。这是一个更新的演示。