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

Question

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

尝试：

Plunker Example

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>

工作插件：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安全性。我将过滤器命名为unsafe：

.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);
};