AngularJS引导警报在超时时解除属性不'；行不通

我尝试使用AngularJS引导警报，如“超时时解除”属性所述。在本例中没有效果，警报只是定期出现，不会消失

<alert type="warning" dismiss-on-timeout="2000">Alert text</alert>

警报文本

但是，在ng重复示例中，它确实起作用：

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

{{alert.msg}

---

问题是缺少close属性吗？如果是这样的话，如何为不属于数组的警报编写关闭函数？

好的，它可以工作，它只是警报指令控制器的指令调用。此控制器依次使用外部范围

关闭
方法。因此，您需要使用来实现它，以便该指令可以调用它：

<alert type="danger" close="closeAlert()" ng-if="show" 
       dismiss-on-timeout="2000">Something happened.</alert>

这里的解决方案是正确的，但是它已经过时，所以这里是更新版本

视图中：（在Angular UI引导中更新）

实际上，您不需要使用变量（
$scope.show=false；
）来隐藏警报。您需要做的只是确保保存警报的阵列一次只能有一个项目，除非您希望在屏幕上显示多个/以前的警报。只需在显示警报后将其删除。见下文：

标记

<uib-alert ng-repeat="alert in alerts" dismiss-on-timeout="2000" type="{{alert.type}}" close="closeAlert()">{{alert.msg}}</uib-alert>

<div uib-alert 
     data-closeable="true"   <!-- sets the 'x' on the right for closing -->
     close="closeAlert()"    <!-- what the 'x' and the timeout will call -->
     alert alert-{{ alert.level }}"   <!-- sets the color (e.g. 'success' or 'danger')  -->
     ng-show="alert.show">   <!-- only show me when this is truthy -->
     {{ alert.message }}
</div>

因此，当您要显示警报时：

$scope.addAlert('success', 'My message');

我从来没能让它工作。这里有一个更简单的方法：

标记

<uib-alert ng-repeat="alert in alerts" dismiss-on-timeout="2000" type="{{alert.type}}" close="closeAlert()">{{alert.msg}}</uib-alert>

<div uib-alert 
     data-closeable="true"   <!-- sets the 'x' on the right for closing -->
     close="closeAlert()"    <!-- what the 'x' and the timeout will call -->
     alert alert-{{ alert.level }}"   <!-- sets the color (e.g. 'success' or 'danger')  -->
     ng-show="alert.show">   <!-- only show me when this is truthy -->
     {{ alert.message }}
</div>

基本上，我所做的就是手动设置一个延迟呼叫来关闭警报并走开

请注意，执行此操作还需要将Angular$timeout服务注入控制器顶部。
我的建议是将其封装在一个可以在任何地方使用的
警报工厂中：

App.factory('alertFactory',['$rootScope', 
    function($rootScope) {
    var alertService = {};
    $rootScope.alerts = [];

    // will automatidally close
    // types are success, warning, info, danger
    alertService.addAuto = function(type, msg, delay) {
        var alert = {'type': type, 'msg': msg};
        $rootScope.alerts.push(alert);      
        if (!delay ) {
            delay = 2500; // default delay is 2500ms
        }  
        window.setTimeout(function() {
            var index = $rootScope.alerts.indexOf(alert);
            if (index > -1) {
                $rootScope.alerts.splice(index, 1);
                $rootScope.$apply(); // refresh GUI
            } 
        }, delay);
    }

    return alertService;
}])

例如，将其放在您的'index.html'中

<script src="components/angular-ui-bootstrap-bower/ui-bootstrap-tpls.js"></script>
...
<alert ng-repeat="alert in alerts" type="{{alert.type}}" close="closeAlert($index)">{{alert.msg}}</alert>

工作正常：是的，正如我所说，在一系列警报上使用ng repeat时没有问题。但我正在寻找一个单一的警报，正如您所看到的，如果您复制第一个代码位，它在那里就不起作用了。谢谢！我怀疑这是关于close方法的，但不确定如何实现它。“close”方法是什么？@Imran如果还有可用的使用示例，那就太好了。谢谢我在回答中举了个例子。您只需要实现Angular调用的回调。我也应用了与您的代码相同的方法，但只是消除了超时基本警报并没有隐藏。那么，我该怎么办呢？请建议，谢谢
$scope.closeAlert = function() {
    $scope.alert.show = false;
}

$scope.showAlertForFiveSeconds = function(){
    $scope.alert.message = 'Something went wrong!');
    $scope.alert.level = 'danger';  // red
    $timeout(closeAlert, 5000);  // close the alert in 5 seconds
}

App.factory('alertFactory',['$rootScope', 
    function($rootScope) {
    var alertService = {};
    $rootScope.alerts = [];

    // will automatidally close
    // types are success, warning, info, danger
    alertService.addAuto = function(type, msg, delay) {
        var alert = {'type': type, 'msg': msg};
        $rootScope.alerts.push(alert);      
        if (!delay ) {
            delay = 2500; // default delay is 2500ms
        }  
        window.setTimeout(function() {
            var index = $rootScope.alerts.indexOf(alert);
            if (index > -1) {
                $rootScope.alerts.splice(index, 1);
                $rootScope.$apply(); // refresh GUI
            } 
        }, delay);
    }

    return alertService;
}])

<script src="components/angular-ui-bootstrap-bower/ui-bootstrap-tpls.js"></script>
...
<alert ng-repeat="alert in alerts" type="{{alert.type}}" close="closeAlert($index)">{{alert.msg}}</alert>

App.controller('myCtrl', [ "alertFactory", function(alertFactory) {

    var optionalDelay = 2500;
    alertFactory.addAuto('success', 'my alert text', optionalDelay);
}]);