angularjs - angular-ui ブートストラップ アラートにリンクを含めますか?

Question

angular-ui ブートストラップアラートにリンクを含めるにはどうすればよいですか?

試み：

プランカーの例

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