如何在！important中使用ng-style？

標籤按鈕已經分配了光標css。我想根據is_active值來覆蓋遊標css以禁用按鈕。 is_active可能具有0或1的值。以下是js/html的代碼，請讓我知道將光標css應用於按鈕的正確方法。如何在！important中使用ng-style？

$scope.ngStyleDisabled = function(status) { 
 
    if (status == 1) { 
 
    return {}; 
 
    } else if (status == 0) { 
 
    return '{\'cursor\':\'not-allowed !important\',\'pointer-events\':\'none\'}'; 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<button ng-style="{{ngStyleDisabled(item.is_active)}}">Action Button</button>

來源

2015-09-16 Nishant

按照documentation你的表達需要有一個目標：

表達其evals一個對象，它的鍵CSS樣式名稱和值的對應值的那些CSS密鑰。

嘗試返回一個對象而不是字符串（使用quoutes因爲CSS屬性可能無效鍵）：

$scope.ngStyleDisabled = function(status) { 
    if (status == 1) { 
    return {}; 
    } else if (status == 0) { 
    return { 
     'cursor': 'not-allowed', // !important does not work in ng-style 
     'pointer-events': 'none' 
    }; 
    } 
}

而且，在你的模板離開了大括號：

<button ng-style="ngStyleDisabled(item.is_active)">Action Button</button>

此JSFiddle顯示屬性如何應用於按鈕。

注意根據這一question這GitHub上issue，該!important關鍵字不是ng-style指令中的支持。您可以在鏈接後找到解決方法。

來源

2015-09-16 07:57:04 muenchdo

想你的代碼返回的結果作爲 <鈕納克式= 「{」光標「：」！不被允許重要「」指針事件「：」無「}」>動作按鈕 – Nishant

這不是你想要的嗎？ – muenchdo

此返回值不帶雙引號。 – Nishant

ng-style不支持!important。

因此，替代方案是使用ng-class而不是ng-style，它將解決問題。

如果您想專門使用ng-style，請嘗試在html本身中編寫代碼 - 請勿嘗試在任何函數中編寫代碼。

來源

2016-05-26 09:33:13

https://github.com/angular/angular.js/issues/5379中提到的最優雅的解決方法適合我！

實施例（寫在玉/哈巴狗）：

a#share-test-link.item(ng-show="iAmTeamCreator()", href="", data-ng-attr-style="{{iAmTeamCreator() && 'display: block!important' || ''}}")

來源

2016-09-05 06:59:01

如何在！important中使用ng-style？

回答

相關問題