angularjs – 在angular-ui bootstrap警报中包含链接？

发布时间：2020-12-17 07:23:47 所属栏目：安全来源：网络整理

导读：如何在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(

如何在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);
  };

}

在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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!