は私が角度ページにHTMLを挿入したい

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

あなたはHTMLコンテンツをバインドするng-bind-html（angular ngBindHtml docs）を使用する必要があります...

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

あなたの角度コードは機能しますが、正しい場所にHTMLバインディングを配置していません。 あなたが<div ng-bind-html="trustHTML(pgf)"></div>

Answer 3

はモジュールngでngBindHtmlディレクティブを試してみてくださいと言う必要がありますので、あなたのHTMLに{{ function }}

を結合角度内で機能を設定することはできません。 HTML要素にコンテンツをバインドする安全な方法を提供します。

構文：

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

DEMO

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>