Angular: compiling template from string to string

Question

test.directive('testMe', ['$compile', function($compile) {
          return {
            restrict: 'EA',
            transcluded: true,
            link: function(scope, element, attrs) {
              scope.state = 'compiled';
                //a = $(element.html());  //this gives: Error: Syntax error, unrecognized expression: Something I actually want to save {{state}}
                a = $('<div>' + element.html() + '</div>');
              var el = $compile(a)(scope);
              scope.compiled = element.html();
            },
          }
        }]);

For some reason I want to compile template with a given scope to a string, and after asking Uncle Google and doing some experiments I gave up.

Does annyone knows how to do this? Maybe my approach is wrong at all?

I want to notice that as a result I need template compiled to string, saved in a variable.

EDIT

To be more specific, here's what i need:

var template = "<p>{{variable}}</p>";
$scope.variable = "test";
var compiled = //magic goes here
alert(compiled); // gives <p>test</p>

what exactly are you trying to do? since you are in the link function, directive is already compiled, so it doesn't make sense to compile it again — doodeec
– doodeec, Commented Mar 12, 2014 at 15:51
As I precisely said, I want to save compiled template into a string. The place where I'm going to do it has no matter, as I was trying to do it in many places... In fact, I was trying even to: 'result = $compile(angular.element("<p>zsfgsdfg {{variable}}</p>"))($scope);' but still with no result. — user2207211
– user2207211, Commented Mar 13, 2014 at 7:29
I understand now, so maybe you want to use something like $parse('variable')($scope) — doodeec
– doodeec, Commented Mar 13, 2014 at 7:48
Unfortunatelly, it's not what I need - as I understood, $parse compiles expressions, while I need to compile entire template. I updated my fiddle to check how it works, and unfortunatelly it's definitelly not what I need. jsfiddle.net/hCDM4/8 — user2207211
– user2207211, Commented Mar 17, 2014 at 9:40

casraf · Accepted Answer · 2015-04-20 13:01:40Z

I recently stumbled onto a similar problem and after several hours i was able to solve it with a little help from this post: Blog post from Ben Lesh

I wanted to create a ComboBox to select an Image for another Entity to save in a relational Database. Of course my Entity had other relations too and so I described them in a JSON-File

//image
{ id: 4, path: 'http://www.example.com/myimage.png', name: 'Picture of my cat' }
//entity
{ id: 7, foo: 'bar', imageId: 4, anotherEntityId: 12}
//anotherEntity
{ id: 12, name: 'My Entity'}

I now wanted to create a Formular for entering new entities and for the foreign keys I wanted a combobox I then declared another JSON-Object, containing every column of entity and also how i wanted them rendered

{cols: 
    [
        {
         name: 'imageId', 
         displayName: 'Image', 
         type: Image, 
         template: '<img src="{{e.path}}" />{{e.name}}'
         },
         ...
]}

To do so i created a new directive, called nComboBoxRenderer

<ng-combo-box-renderer data="image", template="column.template"></ng-combo-box-renderer>

-

directives.directive('ngComboBoxRenderer', ['$compile', function($compile) {
    return {
        restrict: "E",
        scope: {
            e: '=data',   // in my case this is the image
            template: '=template'  // the template
        },
        link: function($scope, element, attributes) {
            var tl = angular.element("<span>" + $scope.template + "</span>");
            compiled = $compile(tl);
            element.append(tl);
            compiled($scope);
        }
    }
}]);

While this is not the exact same use case as you have, the process involved appears to be the same.

Collectives™ on Stack Overflow

Angular: compiling template from string to string

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related