Question

我想将html注入角度页面

我的控制器以：

开头

myapp.controller("myCtrl", function ($scope, $http, $stateParams, $sce) {

$scope.renderHtml = function(html_code) {
    return $sce.trustAsHtml(html_code);
};
$scope.pgf = "<p>Hello</p>";

在我的HTML页面上，我有：

<div class="intro"> AA {{renderHtml(pgf)}} AA </div>

在浏览器中，我看到了：

AA <p>Hello</p> AA

我想要的是

AA
Hello
AA

这是一个版本问题 - 如何选择一组一致的版本？（如果我只提高版本，我会遇到各种错误......）

Answer 1

您必须使用ng-bind-html（angular ngBindHtml docs）来绑定HTML内容...

CONTROLLER

function myCtrl($scope, $sce) {

    $scope.renderHtml = function(html_code) {
        return $sce.trustAsHtml(html_code);
    };

    $scope.pgf = "<p>Hello I'm a Bear</p>";
}

HTML 的

<div ng-bind-html="renderHtml(pgf)"></div>

此外，您可以通过示例了解PLUNKER。

Answer 2

因此，您的Angular代码可以正常工作，但您并没有将html绑定放在正确的位置。您无法在角度绑定{{ function }}

内设置功能

因此，在您的HTML中应该说<div ng-bind-html="trustHTML(pgf)"></div>

Answer 3

在模块ng中尝试ngBindHtml指令。它提供了一种将内容绑定到HTML元素的安全方法。

语法：

<element ng-bind-html="expression"></element>

<强>样本

var app = angular.module('myApp', []);

app.controller('MainCtrl', ['$scope', '$sce', function($scope, $sce) {
  $scope.renderHtml = function(html_code) {
    return $sce.trustAsHtml(html_code);
  };

  $scope.pgf = "<h1>Hello I'm a Bear</h1>";
}]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MainCtrl">
  <div ng-bind-html="renderHtml(pgf)"></div>
</div>

无法将HTML注入角度页面

3 个答案: