Question

我有一个名为sections的对象数组。每个对象（部分中的部分）都具有name，cssclass等特性。例如：

    $scope.sections = [
                     { title 'first section', cssclass: 'red'},
                     { title: 'second section', cssclass: 'blue'}
                     ];

在任何用户可以复制的视图中输出某些HTML代码的最佳方法是什么？让我们举个例子说它完全输出

<section class="red"> <h1> first section </h1></section>
<section class="blue"> <h1>second section</h1></section>`

以便循环使用sections数组可能具有的所有对象。

为了澄清一次，我想要一个textarea（或类似的东西），其中html没有被处理，但以原始形式显示给用户

Answer 1

可以在$ compile中使用'pass'来随意执行指令处理，然后使用angularJS生成的HTML执行任何操作。此外，必须根据用户对新元素的模型输入提供唯一的范围，这可以使用$ rootScope。$ new（）来完成。在下面的示例中，模型格式应该是JSON，因此它不喜欢，爆炸，但如果一个人创建这个供个人使用，可以允许简单的JS输入并使用eval（），允许用户写一个更复杂的模型。

这里有效：http://jsbin.com/taqoqi/1/

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>

希望这有帮助！

如何使用Angular JS创建可复制的HTML代码

1 个答案: