如何使用Angular JS創建可複製的html代碼

我有一個名爲sections的對象數組。每個對象（部分中的部分）都具有像name,cssclass等等。例如：如何使用Angular JS創建可複製的html代碼

$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>`

等進行循環的該部分陣列可具有的所有對象。

只是爲了澄清一個更多的時間，我想一個文本（或類似的東西），其中HTML不是原始的形式處理，但顯示給用戶

來源

2014-11-15 Michael

這對我來說有點不清楚，這與Angular有什麼關係，以及您的部分 - 對象的確切結構如何影響所有這些。我想你可以在這裏得到更好的幫助，如果你縮小了你的問題更多 – avalancha

更新，現在更清楚了嗎？請原諒我的英語我是阿根廷人！ – Michael

人們可以在$編譯使用「通行證」隨意做指令處理，然後用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>

希望這有助於！

來源

2014-11-15 20:06:24

如何使用Angular JS創建可複製的html代碼

回答

相關問題