javascript - Using Angular templates to generate exportable HTML -
does angular have way return me html string when given template , object apply to?
angular has powerful templating engine i'd utilize generate html can copied out of web app textbox, (or similar) , pasted external cms.
example:
input object
var friends = [ {name:"steve",age:32,favoritefood:"pizza"}, {name:"maria",age:28,favoritefood:"pasta"}, {name:"susan",age:30,favoritefood:"burritos"} ] template
<h1>friends</h1> <ul> <li ng-repeat="friend in friends"> <div> {{friend.name}} {{friend.age}} years old , likes eat <strong>{{friend.favoritefood | lowercase }}</strong>. </div> </li> </ul> output/copyable html
<h1>friends</h1> <ul> <li ng-repeat="friend in friends"> <div> steve 32 years old , likes eat <strong>pizza</strong>. </div> </li> <li ng-repeat="friend in friends"> <div> maria 28 years old , likes eat <strong>pasta</strong>. </div> </li> <li ng-repeat="friend in friends"> <div> susan 30 years old , likes eat <strong>burritos</strong>. </div> </li> </ul>
you can use pass in $compile directive-processing @ , snatch angular-generated html whatever want it. need supply unique scope based on user's model input new element, , can $rootscope.$new(). in example, model format expected json, doesn't like, explode, if you're making own personal use allow regular js input , use eval(), allowing user write more sophisticated model.
here in action: 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}} 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 not valid json.'; } if (model) { try { template = $($scope.template); } catch (err) { console.log(err); template = null; $scope.output = 'template not valid(ish) html.'; } } if (template) { if ($magicscope) { $magicscope.$destroy(); } $magicscope = $rootscope.$new(true); (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> this fun, learned quite bit in process of answering!
Comments
Post a Comment