4

标记按钮已经分配了光标 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>

4

4 回答 4

3

ng-style不支持!important。

所以alternate是使用ng-class代替ng-style，它会解决问题。

如果您想ng-style专门使用，请尝试在 html 本身中编写 - 请不要尝试在任何函数中编写。

于 2016-05-26T09:33:13.457 回答
2

剧透警告：每个说 ng-style 不支持的人!important都是*错误的！

*嗯，有点不对。即，虽然它绝对不支持开箱即用，但您可以使用以下解决方法强制它（为方便起见在此处简化）：

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

例如

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

等等......所以我们必须使用黑客才能开始!important工作！？！这就像......双重黑客！还是双双交叉！！三叉戟？！？

哈哈。

于 2020-05-31T07:31:40.997 回答
1

根据文档，您的表达式需要是一个对象：

表达式，它评估一个对象，其键是 CSS 样式名称，值是这些 CSS 键的对应值。

尝试返回一个对象而不是字符串（使用引号，因为 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显示了如何将属性应用于按钮。

注意 根据这个问题和这个 GitHub问题，指令!important中不支持关键字。ng-style您可以在链接后面找到解决方法。

于 2015-09-16T07:57:04.850 回答
0

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-05T06:59:01.457 回答