CODEWITHSUNDEEP
javascriptangularjs
Shoreline
Shoreline

Reputation: 812

How do I generate a standalone HTML page in Angular

I want to generate a full standalone HTML page.

So far I've tried:

$compile(
  angular.element('
    <html>
      <body>
        <div>{{stuff}}</div>
        <ul>
          <li data-ng-repeat="item in list">
            {{item}}
          </li>
        </ul>
      </body>
    </html>
  ')
)({
  stuff: 'Things',
  list: [
    'item1',
    'item2'
  ]
});

But that only returns a text element.

I've successfully used $interpolate for the variables alone, but that won't work for the ng-repeat and other directives.

How would I generate a fully compiled HTML page on the frontend?

If your question is "why would you do this?", think of a page creator interface, where the user might input some of the variables and expect an HTML page in response.

Upvotes: 1

Views: 1198

Answers (1)

user125661
user125661

Reputation: 1568

I'm not sure I completely understand your question, but I've created the snippet below. Is this what you want to achieve? An important thing I changed about your example, is that I created the scope for the link function by using $rootScope.$new(). It doesn't work by using simply a plain javascript object.

angular.module('test', [])
  .controller('test', function($rootScope, $rootElement, $compile) {
    var element = angular.element('<html><body><div>{{stuff}}</div><ul><li ng-repeat="item in list">{{item}}</li></ul></body></html>');
    var scope = $rootScope.$new();
    scope.stuff = 'Things';
    scope.list = [
      'item1',
      'item2'
    ];
    var result = $compile(element)(scope);
    $rootElement.append(result);
  });
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="test" ng-controller="test"></div>

Upvotes: 1

Related Questions