AngularJS - 如何添加一个条件来引导模态目标

AngularJS - how to add a conditional to bootstrap modal target?

本文关键字：目标 条件 一个 模态 何添加 AngularJS 添加      更新时间：2023-09-26

所以我有一个在单击按钮时出现的模态 - 但是我希望模态仅在满足某些条件时才出现（在我的控制器中定义）。

网页代码：

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

以上工作（带有 id "previewModal"的模式在单击时弹出）。所以我的方法是在控制器中添加条件，并使用 Angular 数据绑定在其中定义"目标"的值。

即：

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

然后控制器将具有：

$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，但这也没有奏效。我知道我的控制器功能很好，因为当我将 {{ previewLink }} 放在 p html 标签中时，它会打印出我想要的正确 id。所以问题是我如何在按钮类中绑定数据。

如果您对按钮被禁用或变灰感到满意，那么一种解决方案是使用 ng-disabled。您的控制器看起来像这样;

$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 语句上遇到错误大小写，它将变得不可单击。

您可以简单地使用两个按钮，然后根据您的表情使用ng-if或ng-show显示其中一个按钮。您可以简单地在内部使用角度。

<button ng-show="previewLink !== '#'" type="button" data-uk-modal="{target: '#previewLink'}" ng-click="previewOfferBefore()">
    Preview
</button>
<button ng-show=""previewLink === '#'"" type="button" data-uk-modal="{target: '#'" ng-click="previewOfferBefore()">
    Preview
</button>

另类：

我会尝试ng-attr将您的角度表达式放入属性中，例如

ng-attr-uk-modal="{{'target:' + value}}"

并将value绑定到所需的目标。我还没有尝试过这个，可能需要一些调整。

相关文章：