Question

我有以下内容：

标记：

＆＃13;

angular.module('web').controller('AppController', function($scope) {
  $scope.alerts = [];
  $scope.alerts.push({
    type: 'danger',
    msg: 'I am an error'
  });
  $scope.alerts.push({
    type: 'danger',
    msg: 'I am an error'
  });
});

＆＃13;

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.11.2/ui-bootstrap-tpls.js"></script>
<html>

<body ng-app="web">
  <div ng-controller="AppController">
    <alert ng-repeat="alert in alerts" type="{{alert.type}}" close="closeAlert($index)">{{alert.msg}}</alert>
  </div>
</body>

</html>

＆＃13;

<alert ng-repeat="alert in alerts" type="{{alert.type}}" close="closeAlert($index)">{{alert.msg}}</alert>

控制器：

$scope.closeAlert = function (index) {
    $scope.alerts.splice(index, 1);
};

function addError(error) {
    $scope.alerts.push({ type: 'danger', msg: error.data });
}

但是没有显示关闭按钮：

enter image description here

任何人都可以帮我显示关闭按钮吗？

我用Grunt和bower创建项目的scafolding。

Answer 1

虽然可能不是你的问题的解决方案，但我发现，使用ng-bind和不允许的提醒也会删除关闭按钮（因为ng-bind控制整个元素的内容）。

因此，您应始终使用{{ alert.message }}表示法来显示提醒内容。

Answer 2

如果你想避免使用{{alert.msg}}（有时可能很难看）你可以使用：

<alert ng-repeat="alert in alerts" type="{{alert.type}}" close="closeAlert($index)">
   <div ng-bind="alert.msg"></div>
</alert>

Answer 3

经过一些研究后，我发现当你多次定义“警报”时，数组和关闭属性＆＃39; X＆＃39; dissapear。

我认为这可能发生，因为定义是否应该显示的布尔值在看到变量的多次后被改变，就会被切换。

感谢您的帮助：）

我希望这对任何人都有帮助。

Answer 4

我遇到了同样的问题。我的解决方案是使用closeAlert函数在'X'中使用ng-click。我根据ui-bootstrap向警报数组添加了ng-repeat。你可以在这里查看。

http://plnkr.co/edit/hcVlFZ2yZzLHaUahXaJK

希望它有所帮助。

警报中没有显示关闭按钮

4 个答案: