ng-click on addClass 事件只会在第二次点击按钮时触发

Question

我有一个类似这样的引导警报

<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>

我将使用 jquery/angular 动态添加/删除类（下面的代码只会在用户没有在输入文本中输入任何值并单击addItem 按钮时运行）

添加项目按钮：

<button ng-click="addItem()" class="btn btn-success" type="button">Add</button>

处理 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 事件只有在我点击按钮TWICE 后才会触发。我的意思是警报将完美地淡入/淡出，但只有在第一次单击时未添加类，但在第二次单击按钮时，该类将被添加到警报中。

感谢任何可以帮助我的人。

Answer 1

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

使用 ng-show 代替 ng-if:

<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>

或者你可以使用 ng-class:

<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>