当给定一个模板和一个应用它的对象时，Angular 是否有办法返回给我一个 HTML 字符串？
Angular 有一个强大的模板引擎，我想利用它生成 HTML，可以从文本框(或类似的)复制我的网络应用程序并粘贴到外部 CMS。
例子:
输入对象
var friends = [
{name:"Steve",age:32,favoriteFood:"Pizza"},
{name:"Maria",age:28,favoriteFood:"Pasta"},
{name:"Susan",age:30,favoriteFood:"Burritos"}
]
模板
<h1>Friends</h1>
<ul>
<li ng-repeat="friend in friends">
<div>
{{friend.name}} is {{friend.age}} years old and likes to eat
<strong>{{friend.favoriteFood | lowercase }}</strong>.
</div>
</li>
</ul>
输出/可复制的 HTML
<h1>Friends</h1>
<ul>
<li ng-repeat="friend in friends">
<div>
Steve is 32 years old and likes to eat
<strong>pizza</strong>.
</div>
</li>
<li ng-repeat="friend in friends">
<div>
Maria is 28 years old and likes to eat
<strong>pasta</strong>.
</div>
</li>
<li ng-repeat="friend in friends">
<div>
Susan is 30 years old and likes to eat
<strong>burritos</strong>.
</div>
</li>
</ul>
最佳答案
您可以使用 $compile 中的 pass 随意进行指令处理，然后抓取 Angular 生成的 html 来做任何您想做的事情。但是您还需要根据用户对新元素的模型输入提供一个唯一的范围，您可以使用 $rootScope.$new() 来做到这一点。在我的例子中，模型格式应该是 JSON，所以它不喜欢，explode，但是如果你做这个是为了你自己的个人使用，你可以允许常规的 js 输入并使用 eval()，允许用户编写更复杂的模型。
它正在运行:http://jsbin.com/inocag/4/
JS
var module = angular.module('module', []);
module.directive('xxAngulizer', function($compile, $rootScope) {
return {
restrict: 'A',
template: '<div>TEMPLATE</div><textarea id="template" ng-model="template" ng-change="update"></textarea>' +
'<div>MODEL</div><textarea id="model" ng-model="model" ng-change="update"></textarea>' +
'<div>HTML OUTPUT</div><textarea id="output" ng-model="output"></textarea>' +
'<div id="hidden" ng-hide="true"></div>',
scope: true,
link: function($scope, elem) {
var templateElem = $(elem.find('#template'));
var modelElem = $(elem.find('#model'));
var outputElem = $(elem.find('#output'));
var hiddenElem = $(elem.find('#hidden'));
$scope.template = '<div ng-repeat="cat in cats">{{cat.name}} the famous {{cat.breed}}</div>';
$scope.model = '{ "cats": [{ "name": "Fussy", "breed": "Russian Blue" },' +
' { "name": "Juniper", "breed": "Maine Coon" },' +
' { "name": "Chives", "breed": "Domestic Shorthair" }] }';
$scope.output = '';
$scope.update = update;
var $magicScope;
function update() {
var model, template;
try {
model = JSON.parse($scope.model);
} catch (err) {
model = null;
$scope.output = 'Model is not valid JSON.';
}
if (model) {
try {
template = $($scope.template);
} catch (err) {
console.log(err);
template = null;
$scope.output = 'Template is not valid(ish) HTML.';
}
}
if (template) {
if ($magicScope) { $magicScope.$destroy(); }
$magicScope = $rootScope.$new(true);
for (var p in model) {
$magicScope[p] = model[p];
}
//$scope.$apply(function() {
$compile(hiddenElem.html(template))($magicScope);
//});
//$scope.$apply(function(){
// $scope.output = hiddenElem.html();
//});
setTimeout(function(){
$scope.output = hiddenElem.html();
$scope.$apply();
}, 500);
}
}
$scope.$watch('template', update);
$scope.$watch('model', update);
setTimeout(update, 500);
}
};
});
HTML
<!DOCTYPE html>
<html>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.min.js"></script>
<body ng-app="module">
<div xx-angulizer></div>
</body>
</html>
这很有趣，我实际上在回答的过程中学到了很多东西!
关于javascript - 使用 Angular 模板生成可导出的 HTML，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17982561/