我想生成一个完整的独立 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 页面作为响应。
最佳答案
我不确定我是否完全理解您的问题,但我已经创建了下面的代码段。这是你想要达到的目标吗?我对您的示例所做的重要更改是,我使用 $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>
关于javascript - 如何在 Angular 中生成独立的 HTML 页面,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46200275/