在Angular指令参数中使用HTML

Use HTML in Angular Directive parameter

本文关键字：HTML 参数 Angular 指令      更新时间：2023-09-26

我试图将html代码传递给一个angular指令作为参数。这可能吗?

这是html中的指令。在指令内部，<br><br>以纯文本形式显示。

<mbs-are-you-sure body-text="'You are exporting to: ' + environmentsPretty + '.<br><br> You will replace all books.'"></mbs-are-you-sure>

这里是指令:

.directive('mbsAreYouSure', [function() {
    return {
        restrict: 'E',
        scope: {
            bodyText: '='
        },
        templateUrl: 'directive-templates/are-you-sure.html'
    };
}]);

和模板:

<div>{{bodyText}}</div>

你可以修改你的指令绑定到html，并使用$sce将纯文本"转换"为html(这更像是一个信任问题，哈哈)。

下面是一个plunkr的工作示例:http://plnkr.co/edit/AB95oCiC3yzJTwkeVeUm 

.directive('mbsAreYouSure', [
  function() {
    return {
      restrict: 'E',
      scope: {
        bodyText: '='
      },
      template: '<div>Plain Text:<br/> {{bodyText}}</div><br/>Converted: <p ng-bind-html="teste"></p>',
      controller: function($scope, $sce) {
        $scope.$watch('bodyText', function(value) {
          $scope.teste = $sce.trustAsHtml(value);
        })
      }
    };
  }
]);

可能有其他的方法，也许更优雅，但这是我能想到的最快的方法。

希望有帮助，谢谢。

相关文章：