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

我有一种情况，当单击时，我通过使用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已经在黑色边框中，我将标记设为true，应在添加红色边框的div中添加类addBorder。

但这没有发生。

任何帮助，将不胜感激。

最佳答案

当前，beforeClicked边框属性将覆盖.addBorder的边框。

只需将CSS样式的顺序换成.addBorder即可获得更多首选项。

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

.addBorder {
  border: 1px solid red;
}

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