如何在Angular中生成獨立的HTML頁面

到目前爲止，我已經試過：

$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' 
    ] 
});

但是，只有返回文本元素。

我已經成功地使用$ interpolate作爲變量，但這對ng-repeat和其他指令不起作用。

我將如何在前端生成完整編譯的HTML頁面？

如果您的問題是「爲什麼要這樣做？」，請考慮一個頁面創建器界面，用戶可能會在其中輸入一些變量並期望HTML頁面作爲響應。

來源

2017-09-13 Shoreline

方式過於廣泛，這個網站。我會推薦使用「angularjs render html」之類的東西，然後從那裏開始。 –

谷歌搜索和其他人喜歡它指向標準的Angular模板教程。我正在製作一個生成完整HTML頁面的應用程序。有問題的HTML頁面在生成時不會包含任何Angular。我需要澄清我的問題嗎？ – Shoreline

我不確定我完全理解你的問題，但我已經創建了下面的代碼片段。這是你想實現的嗎？我改變了你的例子的一個重要事情是，我使用$rootScope.$new()爲鏈接功能創建了範圍。它不能使用簡單的JavaScript對象。

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>

來源

2017-09-13 21:55:01 user125661

範圍是問題。我完全忘記了需要生成的範圍。謝謝。 :) – Shoreline

如何在Angular中生成獨立的HTML頁面

回答

相關問題