Dans angularjs, comment intégrer un document HTML complet?

Depuis le serveur, j'obtiens un document HTML complet similaire à celui ci-dessous en tant que string.Dans angularjs, comment intégrer un document HTML complet?

<!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>

En AngularJS, comment compiler cette chaîne dans un document HTML puis l'afficher dans un l'autre?

Source

2017-09-12 mahan

Est-ce une iframe que cherchez-vous? Si oui, vous pourriez faire quelque chose de similaire à ceci: https://stackoverflow.com/questions/9804739/html-frame-src-attribute-use-html-code-instead-of-url – JoCa

Je l'ai fait avant d'utiliser le $ compiler service angulaire et les directives.

Vous pouvez référencer à https://docs.angularjs.org/api/ng/service/$compile

Ici vous avez un exemple de code

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); 
     } 
    } 
});

Que vous pouvez passer la chaîne html à la directive que: Au lieu de var t = "<button ng-click='printSomething()'>{{label}} vous pouvez passer la chaîne HTML dans votre portée de $ tels que

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); 
     } 
    } 
});

que le contenu de votre fichier html serait:

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

Vous pouvez également trouver de bonnes lignes directrices pour la mise en œuvre des directives dans la documentation angulaire à Angular Directives Documentation

Source

2017-09-12 20:34:34 josephpedro

Vous pouvez simplement utiliser la ngBindHtml directive.

savoir en breif sur la façon d'utiliser ngBindHtml directive se référer https://docs.angularjs.org/api/ng/directive/ngBindHtml

est un exemple ci-dessous qui utilise la directive ngBindHtml et rend le 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>

Source

2017-09-13 13:12:28

Dans angularjs, comment intégrer un document HTML complet?

Répondre

Questions connexes