我有如下警告:

$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>'));


我将其绑定到html页面,如:

 <uib-alert ng-repeat="alert in alerts" type="{{alert.type}}"
 close="closeAlert($index, alerts)" dismiss-on-timeout="2500">
            <span ng-bind-html="alert.msg"></span>
        </uib-alert>


结果是,
实际输出:

    Error: Invalid Alias Name: Certain
    limitations apply to alias naming. '<a href="http://google.com/">Please
    refer to the documentation</a>'


预期产量:
    错误:无效的别名:某些
        限制适用于别名命名。 'Please refer to the documentation'

谁能帮忙吗?我不知道我在想什么!

谢谢!

最佳答案

您的示例应该可以运行,请检查控制台中是否有错误。这是一个工作示例:



var app = angular.module('myApp', ['ngSanitize', 'ui.bootstrap']);
app.controller('myCtrl', function($scope, $sce) {
  $scope.alerts = [];
  $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>'));
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-sanitize/1.6.9/angular-sanitize.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.5.0/ui-bootstrap-tpls.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />

<div ng-app="myApp" ng-controller="myCtrl">

  <div uib-alert ng-repeat="alert in alerts" ng-class="'alert alert-{{alert.type}}'">
    <span ng-bind-html="alert.msg"></span>
  </div>

</div>





注意:


注入ngSanitize模块
注入$sce
使用<div uib-alert代替<uib-alert(可选)
使用引导CSS的正确语法将type更改为ng-class

关于javascript - $ sce.trustAsHtml无法正常工作?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/49492130/

10-09 23:10