Javascript 使用角度模板生成可导出的HTML

当给定一个模板和一个要应用它的对象时，Angular是否有方法返回HTML字符串给我

Angular有一个强大的模板引擎，我想利用它来生成HTML，可以从文本框（或类似文本框）复制出我的web应用程序，并粘贴到外部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>

朋友


{{friend.name}}是{{friend.age}岁，喜欢吃东西
{{friend.favoriteFood}。

输出/可复制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>

朋友


史蒂夫今年32岁，喜欢吃东西
比萨饼。


玛丽亚今年28岁，喜欢吃东西
意大利面。


苏珊30岁了，喜欢吃东西
墨西哥煎饼。

您可以随意使用pass-in$compile来执行指令处理，然后抓起生成的html来执行任何您想要的操作。但是，您还需要根据用户对新元素的模型输入提供一个唯一的作用域，您可以使用$rootScope.$new（）实现这一点。在我的示例中，模型格式应该是JSON，因此它不喜欢、分解，但是如果您是为了自己的个人使用而创建的，您可以允许常规js输入并使用eval（），从而允许用户编写更复杂的模型

这就是它的作用：

JS

var module=angular.module（'module'，[]）；
指令（'xxangulazer'，函数（$compile，$rootScope）{
返回{
限制：“A”，
模板：“模板”+
“模型”+
“HTML输出”+
'',
范围：正确，
链接：功能（$scope，elem）{
var templateElem=$（elem.find（'#template'）；
var modelElem=$（elem.find（'#model'）；
var outputElem=$（elem.find（'#output'）；
var hiddenElem=$（elem.find（'#hidden'）；
$scope.template='{{cat.name}}著名的{{{cat.breed}}'；
$scope.model='{“cats”：[{“name”：“Fussy”，“bread”：“俄罗斯蓝”}，'+
“{”名字“：”杜松“，”品种“：”缅因州库恩“}，'+
“{”名称“：”韭菜“，”品种“：”家养短毛“}]}”；
$scope.output=''；
$scope.update=更新；
var$magicScope；
函数更新（）{
var模型，模板；
试一试{
model=JSON.parse（$scope.model）；
}捕捉（错误）{
model=null；
$scope.output='模型不是有效的JSON'；
}
if（型号）{
试一试{
模板=$（$scope.template）；
}捕捉（错误）{
控制台日志（err）；
模板=null；
$scope.output='模板不是有效的（ish）HTML'；
}
}
如果（模板）{
如果（$magicScope）{$magicScope.$destroy（）；}
$magicScope=$rootScope.$new（true）；
对于（模型中的var p）{
$magicScope[p]=模型[p]；
}
//$scope.$apply（函数（）{
$compile（hiddenElem.html（模板））（$magicScope）；
//});
//$scope.$apply（函数（）{
//$scope.output=hiddenElem.html（）；
//});
setTimeout（函数（）{
$scope.output=hiddenElem.html（）；
$scope.$apply（）；
}, 500);
}
}
$scope.$watch（'模板'，更新）；
$scope.$watch（'型号'，更新）；
设置超时（更新，500）；
}
};
});

HTML

---

这很有趣，在回答的过程中我学到了很多

你看了吗？我想这可能就是你想要的最好答案。非常感谢。

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

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