angularjsでは、完全なHTML文書を埋め込む方法は？

サーバーからは、以下のような完全なHTMLドキュメントがstringとして取得されています。 angularJSでangularjsでは、完全なHTML文書を埋め込む方法は？

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <title>TEST</title> 
 
    <style> 
 
     body { 
 
      color: #eeeeee; 
 
     } 
 
     h1 { 
 
      color: red; 
 
     } 
 
    </style> 
 
</head> 
 
<body> 
 
    <section> 
 
     <h1>Header</h1> 
 
     <p>This is a pargraph</p> 
 
    </section> 
 
</body> 
 
</html>

、HTML文書にこの文字列をコンパイルし、別の1の内側にそれを表示するにはどのように？

出典

2017-09-12 mahan

はですレンダリングの例ですiframeあなたは何をお探しですか？その場合は、次のような操作を行うことができます： https://stackoverflow.com/questions/9804739/html-frame-src-attribute-use-html-code-instead-of-url – JoCa

$ compile角度サービスと指令を使用する前にこれを行っています。

あなたはここのように、あなたがディレクティブにHTML文字列を渡すことができるよりもあなたには、いくつかのコード例

app.directive("example", function($compile){ 
    return{ 
     link: function(scope, element){ 
      var t = "<button ng-click='printSomething()'>{{label}}</button>"; 
      var compFn = $compile(t); 
      var content = compFn(scope); 
      element.append(content); 
     } 
    } 
});

を持ってhttps://docs.angularjs.org/api/ng/service/$compile

でそれを参照することができます。あなたは内のHTML文字列を渡すことができ代わりのvar t = "<button ng-click='printSomething()'>{{label}}

app.directive("example", function($compile){ 
    return{ 
     restrict:'E', 
     scope: { 
      htmlString: '=htmlString' 
     }, 
     link: function(scope, element){ 
      var compFn = $compile(scope.htmlString); 
      var content = compFn(scope); 
      element.append(content); 
     } 
    } 
});

あなたのhtmlファイルの内容が

<example html-string="{{htmlString}}"></example>

また、あなたは単にngBindHtmlディレクティブを使用することができますAngular Directives Documentation

出典

2017-09-12 20:34:34 josephpedro

で角度マニュアルの指示を実行するための適切なガイドラインを見つけることができます。以下はhttps://docs.angularjs.org/api/ng/directive/ngBindHtml

を参照してくださいngBindHtmlディレクティブを使用する方法についてbreifに知ることが

はngBindHtmlディレクティブを使用して、HTML

(function(){ 
 
    angular 
 
     .module('myApp',['ngSanitize']) 
 
     .controller('myCtrl', Controller); 
 
    Controller.$inject = ['$rootScope', '$scope']; 
 
    function Controller($rootScope, $scope){  
 
     activate(); 
 
     function activate(){ 
 
      $scope.html = "<h1>Header</h1><p>This is a pargraph</p>"; 
 
     } 
 
    } 
 
})();

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width"> 
 
    <title>Demo</title> 
 
</head> 
 
<body> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-sanitize.js"></script> 
 
    <div 
 
    ng-app="myApp" 
 
    ng-controller="myCtrl"> 
 
    <div ng-bind-html="html"></div> 
 
    </div> 
 
</body> 
 
</html>

出典

2017-09-13 13:12:28

angularjsでは、完全なHTML文書を埋め込む方法は？

答えて

関連する問題