Question

当给定模板和要将其应用的对象时，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>

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

Answer 1

您可以使用$ compile中的pass来随意执行指令处理，然后抓取角度生成的html来执行任何您想要的操作。但是你还需要根据用户对新元素的模型输入提供一个唯一的范围，你可以使用$ rootScope。$ new（）来实现。在我的例子中，模型格式应该是JSON，因此它不喜欢，爆炸，但是如果你为自己的个人使用它，你可以允许常规的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>

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

使用Angular模板生成可导出的HTML

1 个答案: