javascript - AngularJS - 如何向 Bootstrap 模式目标添加条件？

Question

因此，我有一个在单击按钮时出现的模式 - 但是我希望该模式仅在满足某些条件(在我的 Controller 中定义)时出现。

HTML 代码:

<button class="btn btn-primary-outline" type="button" data-uk-modal="{target:'#previewModal'
}" ng-click="previewOfferBefore()">Preview</button>

上面的作品(点击时弹出 ID 为“previewModal”的模态)。所以我的方法是在 Controller 中添加条件，并使用 Angular 数据绑定(bind)定义其中“目标”的值。

即:

<button class="btn btn-primary-outline" type="button" data-uk-modal="{target: {{ previewLink 
}}}" ng-click="previewOfferBefore()">Preview </button>

然后 Controller 将具有:

$scope.previewOfferBefore = function() {
  if (/*some conditions here*/) {
    $scope.previewLink = '#'; /*don't let a modal pop up */
  }
  else {
    $scope.previewLink = '#previewModal' /*let the modal pop up */
  }
}

我也尝试过的一种方法是使用 ng-href 而不是 bootstrap 的 data-uk-modal，但这也不起作用。我知道我的 Controller 功能很好，因为当我将 {{previewLink}} 放入 p html 标签内时，它会打印出我想要的正确 ID。所以问题是我如何在按钮类中绑定(bind)数据。

Answer 1

如果您同意按钮被禁用或变灰，那么一种解决方案是使用 ng-disabled。你的 Controller 看起来像这样；

$scope.previewOfferBefore = function() {
if (/*some conditions here*/) {
     $scope.canClick= true;
 }
else {
     $scope.canClick= false;
 }
}

然后你的 html 将变成；

 <button ng-disabled="canClick" class="btn btn-primary-outline" type="button" data-uk-modal="{target:'#previewModal'
 }" ng-click="previewOfferBefore()">Preview</button>

如果你的按钮遇到 if 语句中的 false case，它将变得不可点击。