Javascript 单击“使用ng类”时未附加类

我有一个场景，当单击时，我通过使用ng类将一个类附加到一个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' });
};

在这里，当点击按钮时，div已经是黑色边框，我正在使标志为true，它应该向附加红色边框的div添加class

addBorder

但事实并非如此

---

任何帮助都将不胜感激。

只需制作样式

！重要信息

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

---

如下所示更新您的css

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

.addBorder{
  border:1px solid red;

}

---

在单击之前的类之后添加边框类。

当前，单击之前的

边框属性覆盖了
.addBorder
的边框

只需将css样式的顺序交换为
.addBorder
，即可获得更多首选项

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

.addBorder {
  border: 1px solid red;
}

更新小提琴：

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

.addBorder {
  border: 1px solid red;
}