Question

我正在使用AngularJS将JS变量绑定到我的HTML内容，它工作正常。

JS

var app = angular.module("Tabs", [])
  .controller("TabsController", ['$scope', function($scope){
    $scope.events = my_JS_object;
  })

HTML

<div>{{events.test}}</div>

只要my_JS_object.test是一个简单的字符串，就像"Hello World"一样，但是一旦我尝试将HTML标记放在那里，例如Hello <b>World</b>它就不使用标记作为HTML元素，但作为简单的文本。这是有道理的，只是我不知道如何使HTML标签工作。

Answer 1

如Angular文档所述，您可以使用内置的 ng-bind-html 指令来评估模型字符串并将生成的HTML插入到元素中。

实施例：如果您的模型值如下：

$scope.myHTML =
 'I am an <code>HTML</code>string with ' +
 '<a href="#">links!</a> and other <em>stuff</em>';

使用 ng-bind-html ，如：

<p ng-bind-html="myHTML"></p>

有关详细信息，请访问：https://docs.angularjs.org/api/ng/directive/ngBindHtml

注意：请勿忘记在您的应用中注入 ngSanitize 服务。

Answer 2

您需要使用正确评估表达式的ngBindHtml指令，并以安全的方式将生成的HTML插入到元素中。为此，您必须在HTML中添加对angular-sanitize.js的引用，然后在角度模块中注入ngSanitize。

喜欢这样

  var app = angular.module("Tabs", ['ngSanitize'])
     .controller("TabsController", ['$scope', function($scope){
        $scope.events = my_JS_object;
  })

 <div ng-controller="TabsController">
  <div ng-bind-html="events.test"></div>
 </div>

以下是一个完整的工作示例：

＆＃13;

(function(angular) {
  'use strict';
angular.module('bindHtmlExample', ['ngSanitize'])
  .controller('ExampleController', ['$scope', function($scope) {
    $scope.myHTML = 'Hello This is <b>BOLD<b/>';
  }]);
})(window.angular);

＆＃13;

<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0-beta.1/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0-beta.1/angular-sanitize.js"></script>
</head>
<body ng-app="bindHtmlExample">
  <div ng-controller="ExampleController">
     <p ng-bind-html="myHTML"></p>
  </div>
</body>

＆＃13;

有关详细信息，请参阅官方角度文档： https://docs.angularjs.org/api/ng/directive/ngBindHtml

Answer 3

如果要将HTML插入页面，则不应该这样做。此任务有sanitize。例如，在您的控制器中：

$scope.trustedHtml = "<b>Hello World</b>"

在你的HTML中：

<div ng-bind-html="trustedHtml "></div>

在插入之前，如果使用用户指定的文字，请务必检查html。

另外，在创建控制器时，不要忘记将 ngSanitize 添加为依赖项

Answer 4

如果要将自定义HTML嵌入到DOM树中，则更容易使用转换。

angular.module('myApp', [])
.controller('MainCtrl', function ($scope) {
    $scope.overwrite = false;
    $scope.origin = 'parent controller';
})
.directive('myDirective', function() {
    return {
        restrict: 'E',
        templateUrl: 'my-directive.html',
        scope: {},
        transclude: true,
        link: function (scope) {
            scope.overwrite = !!scope.origin;
            scope.origin = 'link function';
        }
    };
});

<script src="https://code.angularjs.org/1.3.2/angular.min.js"></script>
<div ng-app="myApp">
    <div ng-controller="MainCtrl">
        <my-directive>
            <p>HTML template</p>
            <p>Scope from {{origin}}</p>
            <p>Overwritten? {{overwrite}}</p>
        </my-directive>
    </div>
    
<script type="text/ng-template" id="my-directive.html">
    <ng-transclude></ng-transclude>
    <hr />
    <p>Directive template</p>
    <p>Scope from {{origin}}</p>
    <p>Overwritten? {{overwrite}}</p>
</script>
</div>

如何从ngModel呈现HTML标签？

4 个答案: