添加類要基於自定義指令在自定義屬性

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

希望這會給你的方向。 享受。