Question

Tag Button已经分配了光标css。我想根据is_active值覆盖光标css以禁用按钮。 is_active可能具有值0或1.以下是js / html的代码，请告诉我将光标css应用于按钮的正确方法。

$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>

Answer 1

根据documentation你的表达式需要成为一个对象：

对于其键为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关键字。您可以在链接后面找到解决方法。

Answer 2

ng-style不支持!important。

所以替代方法是使用ng-class代替ng-style，它将解决问题。

如果你想特别使用ng-style，那么尝试在html中编写 - 请不要尝试在任何函数中编写。

Answer 3

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

Answer 4

剧透警报：每个说ng-style不支持!important的人都是 * WRONG !!

*嗯，有点不对劲。即虽然确实不支持它，但您可以使用the following workaround（为方便起见在此进行了简化）来强制使用：

<elem data-ng-attr-style="{{ 'color: ' + your_color_var + ' !important' }}"></elem>

例如

<span data-ng-attr-style="{{ 'color: indigo !important' }}"></span>

等等...所以我们必须使用黑客手段来使!important正常工作！？！就像...一双破解！或双双交叉！三重十字架？！？

哈哈。

如何使用ng-style with！important？

4 个答案: