logo标签列表

如何从ngModel中呈现HTML标记？

javascriptangularjsdata-binding
5
我正在使用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标签工作。
4个回答
4
根据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服务。

2
你需要使用 ngBindHtml 指令，正确地评估表达式并以安全方式将生成的 HTML 插入元素中。为此，必须在 HTML 中引用 angular-sanitize.js，然后在你的 Angular 模块中注入 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>

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

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

请参考官方Angular文档获取详细信息： https://docs.angularjs.org/api/ng/directive/ngBindHtml
0
如果您想将HTML插入页面，则不应该以这种方式进行。有sanitize可以完成此任务。 例如，在您的控制器中：
$scope.trustedHtml = "<b>Hello World</b>"

在你的HTML中：

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

在插入用户提供的文本之前，始终检查HTML。

创建控制器时，还要不要忘记添加ngSanitize作为依赖项。

0

如果您想将自定义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>

比使用 ng-bind-html 指令更容易吗？！ - Dayan
为了编写代码的简便性，ng-bind-html更快且更易于理解。也许这只是我的个人偏好，我更喜欢在模板中管理所有的HTML块而不是在控制器中管理。 - Downhillski
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接