添加 Class 到基于自定义属性的自定义指令

Question

我的应用程序中有以下按钮代码：

<a ng-click="addToCart('event', d, type.id, $index )" ng-class="{ 'btn-set': isReady || isWorking || isComplete || hasFailed, 'btn-ready-state': isReady, 'btn-working-state': isWorking && selectedIndex == $index, 'btn-complete-state': isComplete && selectedIndex == $index, 'btn-failed-state': hasFailed }">
    <i ng-if="isReady" class="fa fa-shopping-cart"></i>
    <img ng-src="/images/loading.GIF" class="img" ng-show="isWorking && selectedIndex == $index "></span>
    <i ng-if="isComplete && selectedIndex == $index " class="fa fa-check"></i>
    <span class="text">
        <span ng-if="isReady">Buy Ticket</span>
    </span>
</a>

现在这是一个样式为按钮的简单锚标记，它的作用是在单击时执行一个功能，但是由于数据是通过 ajax 发布到服务器的，所以我为每个按钮创建了多个状态通过定义 classes: isReady, isWorking, isComplete, hasFailed。

准备就绪：

正在工作：

已完成：

当按钮处于休眠状态时，默认 class 已就绪，单击时 class 文本变为 isWorking，当操作成功完成时，它变为 isComplete，如果失败则变为 isComplete对 hasFailed 的更改。然而，上面的代码看起来有点多而且不整洁，特别是因为我的应用程序中有很多按钮，重复这样的代码对我来说似乎很乱而且效率低下，所以我正在考虑为它制定一个指令。例如

<action></action>

然后我可以这样改变状态：

<action working></action>

如果我想为其定义初始文本：

<action ready><b>Initial Text value</b></action>

我可以自己创建操作指令，但是添加属性并使它们应用各自的 class 对我来说是全新的。

Answer 1

创建具有状态的指令。
为指令创建 html 模板。

这样您就可以将代码和 html 分开。

与指令关联的 Js 代码可能有 标志或状态 。并且可以根据需要定制模板。

见下面的代码：

.directive('action', function() {
  return {
    restrict: 'E',
    templateUrl: 'customAction.html'
  };
});

希望这能为您指明方向。享受。

Answer 2

解决了这个问题：。

我不得不一点一点地分解它，但最终我得到了我需要的帮助。 :)

添加 Class 到基于自定义属性的自定义指令

Add Class To Custom Directive Based On Custom Attribute

angularjs

angularjs-directive