添加类要基于自定义指令在自定义属性

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' 
    }; 
}); 

希望这会给你的方向。 享受。