$sce.trustAsHtml失效求助：AngularJS弹窗HTML绑定异常

看起来你的问题是明明用了$sce.trustAsHtml处理富文本内容，但在uib-alert里只显示了部分文本。这种情况大概率是样式限制或者组件默认行为导致的，下面是一步步排查和解决的方法：

1. 先排查CSS样式截断问题 #

UI Bootstrap的alert组件默认可能带有文本截断的样式，比如为了防止长文本撑爆布局，设置了white-space: nowrap、overflow: hidden和text-overflow: ellipsis。你可以先临时覆盖这些样式测试：

/* 在你的自定义样式表中添加 */
.uib-alert {
  white-space: normal; /* 允许文本换行 */
  overflow: visible; /* 显示全部内容 */
  text-overflow: unset; /* 取消省略号 */
}

如果添加后文本显示完整了，那就是样式的问题，你可以根据需求调整样式，比如允许换行或者调整alert的宽度。

2. 确认$sce.trustAsHtml的使用是否正确 #

虽然你已经用了$sce.trustAsHtml，但还是要确认几个点：

• 确保控制器中正确注入了$sce服务，没有遗漏依赖：

  angular.module('yourApp').controller('YourCtrl', ['$scope', '$sce', function($scope, $sce) {
    // 你的代码
    $scope.addAlert = function(type, msg) {
      $scope.alerts.push({type: type, msg: msg});
    };
    // 调用
    $scope.addAlert('danger', $sce.trustAsHtml('Invalid Alias Name: Certain limitations apply to alias naming. <a href="http://google.com/">Please refer to the documentation</a>'));
  }]);
  

• 在控制器里打印$scope.alerts[0].msg，确认它是$sce返回的信任对象（会带有$$unwrapTrustedValue方法），而不是被转换成了普通字符串。如果是字符串的话，ng-bind-html会拒绝渲染。

3. 排除组件本身的限制 #

尝试用普通的<div>标签绑定同样的内容，看是否能完整显示：

<div ng-repeat="alert in alerts" ng-bind-html="alert.msg"></div>

如果普通div能显示完整，那说明是uib-alert组件的内部逻辑或者样式导致的截断，你可以参考UI Bootstrap的alert文档，看是否有相关的配置项可以调整文本显示行为。

4. 检查内容是否被其他元素挤压 #

有时候alert里的关闭按钮（close属性）可能占用了过多空间，导致文本被挤压截断。你可以尝试隐藏关闭按钮测试，或者调整按钮的样式，给文本留出足够的空间。

内容的提问来源于stack exchange，提问作者Pooja Thapa