Javascript ng click on addClass事件仅在第二次单击按钮时触发

我有一个引导警报，看起来像这样

<div id="errorAlert" class="alert col-md-6 col-md-offset-3 fadeAlert" ng-if="itemExistsAlert">
    <button type="button" class="close" data-dismiss="alert">&times;</button>
    <p>{{alertMessage}}</p>
</div>

将处理ng click的函数

$scope.addItem = function() {
  var errorAlert = angular.element(document.querySelector('#errorAlert')); 
  if (!$scope.pollItem) {
        errorAlert.addClass('alert-info');

        $scope.alertMessage = "Item cannot be null";
        $scope.itemExistsAlert = true;
        $timeout(function() {
            $scope.itemExistsAlert = false;
        }, 2000)
        return;
    }
}

代码运行良好，但是

addClass

事件只有在我点击按钮两次后才会触发。我的意思是警报将完全淡出/淡出，但只有类不会在第一次单击时添加，但在第二次单击按钮时，类将添加到警报中

---

感谢所有能帮助我的人。

这是因为ng if从dom中删除了元素，而您正试图向函数中不存在的元素（尚未）添加一个类

如果出现以下情况，请使用ng show而不是ng：

<div id="errorAlert" class="alert col-md-6 col-md-offset-3 fadeAlert" ng-show="itemExistsAlert">
<button type="button" class="close" data-dismiss="alert">&times;</button>
<p>{{alertMessage}}</p>
</div>

&时代；
{{alertMessage}}

或者您可以使用ng类：

<div id="errorAlert" class="alert col-md-6 col-md-offset-3 fadeAlert" ng-class="{'alert-info':itemExistsAlert}"  ng-if="itemExistsAlert">
<button type="button" class="close" data-dismiss="alert">&times;</button>
<p>{{alertMessage}}</p>
</div>

&时代；
{{alertMessage}}

顺便说一句，如果有帮助的话，我使用的是angular v1.6.4。谢谢哦，我现在明白了。。这就是我做错的地方。哈哈，非常感谢你的帮助！！

<div id="errorAlert" class="alert col-md-6 col-md-offset-3 fadeAlert" ng-class="{'alert-info':itemExistsAlert}"  ng-if="itemExistsAlert">
<button type="button" class="close" data-dismiss="alert">&times;</button>
<p>{{alertMessage}}</p>
</div>