基于自定义属性将类添加到自定义指令

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发布到服务器的，我通过定义类为每个按钮创建了几个状态：isReady， isWorking，isComplete，hasFailed。

的isReady：

isWorking：

isComplete：

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

<action></action>

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

<action working></action>

如果我想为它定义一个初始文本：

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

我可以自己创建动作指令但添加属性并使它们应用各自的类对我来说是一个全新的东西。

Answer 1

解决了这个问题：Custom Directive Not Showing。

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

Answer 2

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

这将允许您将代码和html分开。

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

见下面的代码：

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

希望这会给你指路。 享受。