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

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

如果您在没有 Angular 代码（表达式和指令）的情况下绑定 HTML，那么您需要使用 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 作为标记包含在指令模板中

How do I include HTML from an attribute as a token in a directive template

angularjs

angularjs-directive