angularjs - AngularJs 中的警告

Question

Angularjs 具有用于表单验证和显示错误消息的强大基础设施。但是，我处于必须在特定场景中向用户显示警告消息的情况。这是我的简单表格的图表

该表单在两个字段上都应用了必需和模式验证。除了此验证之外，如果 VatAmount，我还希望向用户显示一条警告消息。不是 InvoiceAmount 的 20% .警告将在以下方面与验证不同

它不会阻止表单提交

仅当两个字段(InvoiceAmount 和 VATAmount)都为
有效

警告应该有一个按钮或链接，上面写着“更改和
继续”。当用户按下该按钮时，警告消息将
隐藏和焦点将设置为 VATAmount 字段。

我相信这是创建指令的完美用例。实际上，我已经尝试过并以plunker的形式付出了我的努力。但我的指令不处理以下情况

即使warning中涉及的字段无效也会出现

显示和隐藏功能未实现(不知道如何
瞄准它)

Here是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>'

加上一个 Controller 来更新指令的本地范围来操作 warning目的。 Here's an updated demo .