Question

我想将HTML作为属性注入模板，并将其显示在传递属性的指令中。

我的HTML

<!DOCTYPE html>
<html>

  <head>
    <script data-require="angular.js@*" data-semver="1.4.0-rc.0" src="https://code.angularjs.org/1.4.0-rc.0/angular.js"></script>

    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-app="app">
    <div>
      <my-test mymessage='<b>Booya!</b>'></my-test>
    </div>
  </body>

</html>

我的Javascript

app = angular.module('app', [])
.directive("myTest", function(){
    return {
        scope: {
          mymessage: '='
        },
        restrict: 'E',
        transclude: true,
        template: '<p>Guess what...{{mymessage}}...you know it!</p>'
    };
  });

以下是Plunker中的代码：http://plnkr.co/edit/ZJSkf1Ye4ccKURTJU8KD?p=preview

请注意它如何显示绑定的文字。

我确定这里有几个问题：

我可能没有正确绑定指令范围内的属性
一旦我遇到问题＃1，我很确定HTML会被转义。

为了使指令正确呈现，我需要做出哪些更改？

Answer 1

如果您绑定的HTML没有Angular代码（表达式和指令），那么您需要使用ng-bind-html：

scope: {
  mymessage: "@" // no need for two-way binding
},
template: '<p>Guess what...<span ng-bind-html="mymessage"></span>...you know it!</p>'

这本身就不起作用，因为它不安全。您有两种选择：

1）在您的应用中加入ngSanitize依赖：

angular.module("app", ["ngSanitize"])

这会自动应用HTML环境保护 - Demo

或，2）使用$sce服务并在包含HTML内容的变量上调用$sce.trustAsHtml。但这不起作用，但使用单向字符串绑定"@"。

如何将属性中的HTML作为指令包含在指令模板中

1 个答案: