使用 ng-class 单击时未附加类答案

【问题标题】：Class not appending when click using ng-class使用 ng-class 单击时未附加类
【发布时间】：2017-08-13 00:43:24
【问题描述】：

我有一个场景，当单击时，我通过使用 ng-class 将类附加到 div 将边框颜色从黑色更改为红色。

但是当我点击一个按钮时，模态被触发但类没有被附加。

<div ng-class="{'addBorder':clicked}" class="beforeClicked">
<button ng-click="clickToOpen()">My Modal</button>
</div>

function MyCtrl($scope, ngDialog) {
$scope.clicked=false;
$scope.clickToOpen = function () {
        $scope.clicked=true;
    ngDialog.open({ template: 'templateId' });
};

}

.addBorder{
  border:1px solid red;

}
.beforeClicked{
 width:100px;
  height:300px;
  border:1px solid black
}

DEMO

当点击按钮时，这里的 div 已经是黑色边框了

但这并没有发生。

任何帮助将不胜感激。

【问题讨论】：

标签： javascript css angularjs

【解决方案1】：

只需制作样式!important

.addBorder{
  border:1px solid red !important;      
}

demo

【讨论】：

【解决方案2】：

像下面这样更新你的css

.beforeClicked{
 width:100px;
  height:300px;
  border:1px solid black
}

.addBorder{
  border:1px solid red;

}

在点击类之后添加边框类。

【讨论】：

【解决方案3】：

目前，beforeClicked 的边框属性正在覆盖.addBorder 的边框。

只需将您的 css 样式顺序交换为 .addBorder 即可获得更多偏好。

.beforeClicked {
  width: 100px;
  height: 300px;
  border: 1px solid black
}

.addBorder {
  border: 1px solid red;
}

更新小提琴：http://jsfiddle.net/nashcheez/mb6o4yd1/700/

【讨论】：