Javascript AngularJS警报位于DOM中，应显示但不显示'；T

我的页面中有一个简单的测试警报。我可以看到在DOM页面中生成的标记。在我看来，它应该显示，但它没有。这是我的密码

控制器

Html

镀铬控制台

查看控制台输出，警报是否应可见？事实并非如此。我非常感谢专家的建议

谢谢大家的关注：-）

编辑…

这是我的主app.js文件

这是一个更好的控制器剪辑

编辑2…

这里是计算风格

---

假设您使用UI引导，您需要在控制器中创建closeAlert函数（可能会引发未定义的错误），如下所示：

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

另外，不要忘记在应用程序中添加ui.bootstrap依赖项

编辑：

---

确保您的元素不在display none:）

这是我的工作代码。我想和大家分享非常感谢Apercu帮助我渡过难关：-）html会出现在你的view.html中的某个地方，可能在顶部，然后将AlertService添加到你的应用程序中，并像平常一样插入控制器中

在控制器中

$scope.closeAlert = function (index) {
    AlertService.closeAlert(index);
};

警报html

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

警报服务

angular.module('AJM.AlertService', ['ui.bootstrap'])
.service('AlertService', ['$rootScope', '$sce', '$timeout', function ($rootScope, $sce, $timeout) {

    $rootScope.alerts = []; 

    var self = this;

    var addAlert = function (type, title, msg, seconds) {
        var index = $rootScope.alerts.length;
        $rootScope.alerts.push({ "type":type, "msg":$sce.trustAsHtml('<strong>' + title + '</strong> ' + msg) });
        if (seconds) {
            $timeout(function (index) {
                self.closeAlert(index);
            }, (seconds * 1000));
        }
        return true;
    };

    this.success = function (title, msg, seconds) {
        addAlert('success', title, msg, seconds);
    };

    this.info = function (title, msg, seconds) {
        addAlert('info', title, msg, seconds);
    };

    this.warning = function (title, msg, seconds) {
        addAlert('warning', title, msg, seconds);
    };

    this.danger = function (title, msg, seconds) {
        addAlert('danger', title, msg, seconds);
    };

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

}]);

angular.module（'AJM.AlertService'，['ui.bootstrap']））
.service（'AlertService'、['$rootScope'、'$sce'、'$timeout'，函数（$rootScope、$sce、$timeout）{
$rootScope.alerts=[]；
var self=这个；
var addAlert=函数（类型、标题、消息、秒）{
var index=$rootScope.alerts.length；
$rootScope.alerts.push（{“type”：type，“msg”：$sce.trustAsHtml（''+title+''+msg）}）；
如果（秒）{
$timeout（函数（索引）{
self.closeAlert（索引）；
}，秒*1000）；
}
返回true；
};
this.success=函数（标题、消息、秒）{
addAlert（'success'，title，msg，seconds）；
};
this.info=函数（标题、消息、秒）{
addAlert（'info'，title，msg，seconds）；
};
this.warning=函数（标题、消息、秒）{
addAlert（“警告”、标题、消息、秒）；
};
this.danger=功能（标题、消息、秒）{
addAlert（“危险”、标题、消息、秒）；
};
this.closeAlert=函数（索引）{
$rootScope.alerts.splice（索引，1）；
};
}]);

您应该将

type=“alert.type”

更改为

type=“{{{alert.type}}”

。不，指令是这样工作的谢谢您的帮助！我添加了一些额外的屏幕上限来澄清您的问题。您能在alert div上提供计算CSS吗？我刚刚添加了一张显示计算样式的图片。我在显示屏上画了个圈：没有红色的。不确定为什么要设置它？…如果不查看此属性的应用位置，就无法说出它，但这是您的问题，您可以在控制台中轻松地将其设置为目标，或者设置一个显示块！重要提示：）我在另一个css文件中发现警报显示为“无”。谢谢你让我这么做。但是，现在它确实显示了警报，但它根本没有样式。它甚至不呈现html，而是显示纯文本。用jQuery可以在5分钟内完成的事情，用AngularJS计算需要5个小时。这让人麻木：-/