如何在angularjs模板中显示HTML，而不是字符串？

12 浏览
0 Comments

如何在angularjs模板中显示HTML，而不是字符串？

在我的作用域中有一个变量：

$scope.myvar = "你好世界"

在我的模板中使用：

{{myvar}}

问题是myvar显示的是文字字面值，而我希望它显示换行符。如何做到这一点？请注意，我希望如果将来myvar被更新为其他HTML，那么显示在页面上的应该是“编译”后的HTML，而不是带有HTML标签的文字字面值。

0

3 答案

0 Comments

在AngularJS中，我们可以使用`ng-bind-html`指令直接绑定HTML代码。这个问题的出现是因为默认情况下，AngularJS将HTML代码作为字符串处理，而不会解析和显示实际的HTML元素。

解决方法是使用`ng-bind-html`指令来显示HTML代码。该指令允许我们将HTML代码作为表达式的值进行绑定，并在页面上渲染实际的HTML元素。

下面是一个示例代码，展示了如何在AngularJS模板中显示HTML代码：

在上面的代码中，我们首先在页面头部引入了AngularJS和`angular-sanitize.js`文件（用于支持`ng-bind-html`指令）。然后，在`ng-app`指令中指定了应用程序的名称为`myApp`。

在控制器`myCtrl`中，我们定义了一个变量`myHtml`，并将HTML代码`

Hello, World!

`赋值给它。

在模板中，我们使用`ng-bind-html`指令将`myHtml`绑定到`

`元素上。这样，AngularJS会解析`myHtml`的值，将其作为实际的HTML代码进行渲染，并在页面上显示"Hello, World!"的标题。

通过使用`ng-bind-html`指令，我们可以轻松地在AngularJS模板中显示HTML代码，而不仅仅是字符串。这对于需要动态生成和显示HTML内容的应用程序非常有用。

0
0 Comments

问题的出现原因是在AngularJS模板中显示HTML时，它默认将HTML代码作为字符串处理，而不会将其解析为实际的HTML元素。这导致在模板中显示HTML代码时，它会以文本形式显示，而不是以实际的HTML元素显示。

解决方法是使用ng-bind-html指令来告诉AngularJS将HTML代码作为实际的HTML元素进行解析和显示。它需要与ngSanitize模块一起使用，以确保安全地解析和显示HTML代码。

下面是一个示例，演示了如何在AngularJS模板中显示HTML代码而不是字符串：

在HTML文件中：

在JavaScript文件中：

angular.module('ngBindHtmlExample', ['ngSanitize'])
.controller('ngBindHtmlCtrl', ['$scope', function ngBindHtmlCtrl($scope) {
    $scope.myvar = 'HelloWorld';
}]);

以上示例中，ng-bind-html指令被应用在一个

元素中，它的值为myvar变量。在控制器中，myvar变量被赋值为包含HTML代码的字符串。由于ng-bind-html指令的存在，AngularJS会将该字符串解析为实际的HTML元素，并在模板中进行显示。

以上解决方法参考了AngularJS文档中的示例。

原文链接：https://docs.angularjs.org/api/ng/directive/ngBindHtml

0
0 Comments

问题：如何在AngularJS模板中显示HTML而不是字符串？

原因：由于Angular的严格概念转义，内容需要进行过滤（使用附加模块ngSanitize）或显式地“信任为HTML”（使用$sce.trustAsHtml()）。后者仅用于您知道是安全的内容（例如，没有用户定义的内容），并且也不建议使用。

解决方法：您可以使用ngBindHtml来实现。示例代码如下：

/* 使用ngSanitize */
angular.module('app', ['ngSanitize'])
.controller('myCtrl', function ($scope) {
    $scope.myHtml = 'Hello<br /><br />world !';
});
/* 使用$sce.trustAsHtml() */
angular.module('app', [])
.controller('myCtrl', function ($sce, $scope) {
    $scope.myHtml = $sce.trustAsHtml('Hello<br /><br />world !');
});

注意，ngSanitize将过滤“不适当”的内容，而$sce.trustAsHtml将允许任何内容。

另外，ngSanitize是一个非核心模块，需要单独引入，如下所示：

您可以查看这个短暂的演示以了解更多信息。

0