logo标签列表

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

javascripthtmlangularjs
4

当我给定一个模板和一个对象来应用它时，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>
2
你看过http://docs.angularjs.org/api/ng.$compile了吗？我猜这可能是你要找的函数。 - intuitivepixel
1个回答
6
您可以使用$compile传递指令进行处理，然后获取由Angular生成的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>

这很有趣，我在回答过程中实际上学到了不少东西！

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接