AngularJS - 如何向引导模式目标添加条件？答案

【问题标题】：AngularJS - how to add a conditional to bootstrap modal target?AngularJS - 如何向引导模式目标添加条件？
【发布时间】：2016-01-15 15:20:02
【问题描述】：

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

HTML 代码：

<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。所以问题是我如何在按钮类中绑定数据。

【问题讨论】：

标签： javascript html css angularjs twitter-bootstrap

【解决方案1】：

如果您对按钮被禁用或变灰没意见，那么一种解决方案是使用 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 语句中遇到 false 情况，那么你的按钮将变得不可点击。

【讨论】：

【解决方案2】：

您可以简单地拥有两个按钮，然后根据您的表情使用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 绑定到您需要的目标。这个我没试过，可能需要调整一下。

【讨论】：