在控制器

Question

我正在尝试通过推送相关按钮来实现凭证系统，如果用户没有资格享受折扣，我希望它在页面上显示唯一的错误消息。

    <tr name="vouchers">
  <td>
    <button type="button" class="btn" id="five-pound-voucher" ng-click="ctrl.addFiveVoucher()">£5 off voucher
    </button>
    <button type="button" class="btn" id="ten-pound-voucher" ng-click="ctrl.addTenVoucher()">£10 off voucher
    </button>
    <button type="button" class="btn" id="fifteen-pound-voucher" ng-click="ctrl.addFifteenVoucher()">£15 off voucher
    </button>
  </td>
  <td></td>
  <td>DISPLAY ERROR MESSAGE HERE</td>
  <td></td>
  <td></td>

我的折扣方法与此类似：

self.addFifteenVoucher = function() {
    if(self.subTotalPrice >= 75  && self.containingShoes) {
        self.fifteenPoundVoucher = true;
        self.setTotal();
    }
    else {
        throw new Error("Not Eligible for £15 discount")
    }
}

是否可以使用angular显示此错误消息而不使用flash消息或jquery。 ng-message似乎不适合使用。任何帮助将不胜感激！

Answer 1

我将错误推送到控制器端的数组中并显示如下：

<div class="alert alert-danger" ng-show="validationErrors.length">
  <ul>
    <li ng-repeat="error in validationErrors">
    {{error}}
    </li>
  </ul>
</div>

Answer 2

你所在的地方

<td>DISPLAY ERROR MESSAGE HERE</td>

您可以设置引导样式的错误消息并将其绑定到控制器中的消息集，如下所示。

<div class="alert alert-danger" role="alert" ng-if="errorMessage">
  <span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
  <span class="sr-only" data-ng-bind="errorMessage"></span>
</div>

您可以在之前抛出错误的else块中设置要绑定的errorMessage属性。看起来像下面的

而不是

else {
    throw new Error("Not Eligible for £15 discount")
}

DO

else {
    //possibly $scope.errorMessage depending on how you use your controller
    self.errorMessage = "Not Eligible for £15 discount"; 
}

Answer 3

抛出错误应仅用于技术用例，而不应用于应用程序逻辑。

使用服务发布新的“错误”和指令，这将导致“错误” - 查看Bootstrap alert module。互联网上有成百上千的实施。选择适合你的那个。