angularjs - 在 angular-ui 引导警报中包含链接？

Question

如何在 angular-ui 引导警报中包含链接？

试图：

Plunker 示例

HTML

<div ng-controller="AlertDemoCtrl">
    <alert ng-repeat="alert in alerts" type="alert.type" close="closeAlert($index)">{{alert.msg}}</alert>
    <button class='btn' ng-click="addAlert()">Add Alert</button>
</div>

脚本

function AlertDemoCtrl($scope) {
  $scope.alerts = [
    { type: 'error', msg: 'Oh snap! Change a few things up and try submitting again.' }, 
    { type: 'success', msg: '<a href="">Well done!</a> You successfully read this important alert message.' }
  ];

  $scope.addAlert = function() {
    $scope.alerts.push({msg: "Another alert!"});
  };

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

}

Answer 1

在 AngularJS 表达式中嵌入 HTML 标记通常不是最好的方法，因为这样您将无法评估 AngularJS 指令。

无论如何，回到你的问题 - 有很多方法可以解决你的问题。如果您只是在显示链接之后，最简单的方法是使用ng-bind-html指令（http://docs.angularjs.org/api/ngSanitize.directive:ngBindHtml）：

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

工作 plunk：http ://plnkr.co/edit/Ftab0xtcelXcHSZbFRxs?p=preview

Answer 2

上面的答案需要更多的东西才能为我工作。

我的警报如下所示：

$scope.alerter.add({
    type: "danger",
    msg: "<strong>ERROR:</strong> Unable to load credit care plan. Please contact your administrator."
});

完成上述操作后，我开始收到以下错误：

Error: [$sce:unsafe]

所以我继续前进，并为我制作了一个过滤器来绕过 $sce 安全性。我将过滤器命名为不安全：

.filter('unsafe', function($sce) {
    return function(value) {
        if (!value) { return ''; }
        return $sce.trustAsHtml(value);
    };
})

然后像这样使用过滤器：

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

我的 closeAlert 函数如下所示：

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