StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>You can use pass in $compile to do directive-processing at will and then snatch up the angular-generated html to do whatever you want with it. But you also need to supply a unique scope based on the user's model input to the new element, and you can do that with $rootScope.$new(). In my example, the model format is expected to be JSON, so that it doesn't like, explode, but if you're making this for your own personal use you could allow regular js input and use eval(), allowing the user to write a more sophisticated model.</p> <p>Here it is in action: <a href="http://jsbin.com/inocag/4/" rel="nofollow">http://jsbin.com/inocag/4/</a></p> <p>JS</p> <pre><code>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); } }; }); </code></pre> <p>HTML</p> <pre><code><!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> </code></pre> <p>This was fun, I actually learned quite a bit in the process of answering!</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload