Saving AngularJS template as string

Question

I may just be confusing myself here. But I have a view with a combination of variables and text. And I need to store the entire contents as a string inside my model. ie.

<h3>
  {{vars.color}} is my color: {{theme.color.black}};
</h3>

I'm hoping to be able to save the string to:

{{preference.string}} // as 'base is my color: #000'

I have no problem displaying the text. But I want to save the whole string. (As if I could add ng-model) to the 'h3' tag. But that doesn't work.

Should I be doing this in a function or directive instead?

Thanks in advance...

I'm not sure I understand, you want to save the rendered result of Angular code to a string? — Benjamin Gruenbaum
– Benjamin Gruenbaum, Commented Oct 24, 2013 at 23:36

Benjamin Gruenbaum · Accepted Answer · 2013-10-25 00:46:58Z

1

Generally it is considered bad to touch the DOM from a controller.

However, in your case I don't see other options and as you're only reading from the DOM and not manipulating it in any way it's not as bad.

Assuming you have the text rendered in a controller, you can use $element to gain access to the element and then fetch the text content. Again, this is a last resort and against the Angular philosophy.

var app = angular.module("myApp", [])
app.controller("HomeController", HomeController);

function HomeController($scope,$element) {
    $scope.vars = {};
    $scope.vars.color = "Black";
    $scope.theme = {color:{}};
    $scope.theme.color.black = "#000000";

    $scope.snap = function(){
        alert($element.find("h3").text()); // will alert the text
    }
}

Here is a working example

Alternatively, you can decouple this logic from a controller (and the used DOM) completely using $compile. This is a rather long example but it gives you a peek into Angular's way of doing things, this doesn't require an app.

var $inj = angular.injector(["ng"]); // get access to Angular's services
var template = "<h3>{{vars.color}} is my color: {{theme.color.black}}</h3>"

//now let's access the compilation service, and also a scope service and get a new scope.
var $compile = $inj.get("$compile");
var $scope = $inj.get("$rootScope").$new(true);

// put our stuff in this new scope
$scope.vars = {color:"White"};
$scope.theme = {color:{black:"#000000"}};

// add the template 
var ngTemplate = $compile(angular.element(template));
var result = ngTemplate($scope); 
$scope.$apply(); // tell angular to apply changes to the scope
console.log(result.text()); // now we have our rendered text.
// calling $destroy on the scope here is probably good ;)

here is a fiddle for that

However, are you sure what you're looking for is not partial views? What is the purpose of this?

edited Oct 25, 2013 at 0:46

answered Oct 25, 2013 at 0:38

Benjamin Gruenbaum

278k90 gold badges524 silver badges524 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Adam Over a year ago

Thanks so much for taking the time to do this... I think $compile might be what I'm looking for. I definitely understand about keeping DOM manipulation out of the controller. I really just need to be able to send the contents of the rendered string off to an API. (it gets parsed on the other side). I'm thinking I could just do this all manually in a function as well (there's just a lot of lines). But I was just wondering if there was a $compile hook of some sort. Thanks for pointing me in this direction. I'll dig through it and report back shortly.

Adam Over a year ago

I guess I'm really just looking for jQuery(el).html() at the end of the day :) Your answer has me thinking about a couple possibilities... Report back in a bit.

Benjamin Gruenbaum Over a year ago

You don't need to do el, Angular will hook on jQuery and will let you use .html directly on $element. Glad I could help.

Adam Over a year ago

You definitely did. And yeah, just tested, and it works. Going to put it in a service. Thanks again!

insomiac · Accepted Answer · 2013-10-25 00:16:43Z

0

I think its good to have directive to embed a different html content. you can do something like this.

<h3 show-data>
</h3>

Directive :

 angular.module('myApp', [])
  .controller('Ctrl', function($scope) {
    $scope.vars.color = "base";
    $scope.theme.color.black = "#000";
  })
  .directive('showData', function() {
    return {
      template: '{{vars.color}} is my color: {{theme.color.black}}'
    };
  });

Scope Changes in controller:

$scope.preference.string = $scope.vars.color + "is my color: " + $scope.theme.color.black;

edited Oct 25, 2013 at 0:16

answered Oct 24, 2013 at 23:46

insomiac

5,6848 gold badges47 silver badges73 bronze badges

5 Comments

Adam Over a year ago

Thanks for the response, but I'm not sure I'm following... I see how this will display my code. But I want to save the value back to my object as a string. How would I associate the returned value with a model?

insomiac Over a year ago

Oh.. If you want to do it manually. I will update the changes

Benjamin Gruenbaum Over a year ago

This really doesn't solve OP's issue. The text here is a simple example. OP wants to use Angular for templating strings.

Adam Over a year ago

Exactly what @BenjaminGruenbaum said. I want to store a template string with the rendered code. Thanks again for looking.

Adam Over a year ago

As an example. I want to save the value of template: in the directive above, into a string in my model.

Collectives™ on Stack Overflow

Saving AngularJS template as string

2 Answers 2

Here is a working example

here is a fiddle for that

4 Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related