create mail template with $compile in angularjs

Question

I have a large html file with some css in it. This html forms the body for follow up email after filling in a form. The way it is implemented now, is by string concatenation, which I don't like. The new html email body is also larger. I figured I could do it using angulars $compile function but I cant get it to work correctly.

This is the link to the plunk. I have tried this (which is the current state of the plunk) and also the answer of this question.

The completed and 'interpolated' (whatever that means) string is a parameter for a REST call to the server, which will send the actual email. So I would like to keep the creation of the template in a function which the user can execute with for example a ng-click. This is what I mean:

composer.$inject = ["$http", "$compile", "$scope", "$templateRequest", "$timeout"];
         function composer($http, $compile, $scope, $templateRequest, $timeout) {

           $scope.person = {
             firstname:"jonny",
             lastname:"Bravo"
           };

           compose();


          function compose() {
            $templateRequest("template.html").then(function(html){
              var template = angular.element(html);
              console.log(template);
              $compile(template)($scope);
              console.log(template);

              $timeout(function() {
                $scope.htmlitem = template.html();
              });

           });
          }

I really wonder why it doesn't work.

Yin Gang · Accepted Answer · 2016-05-17 10:45:59Z

2

You need to append complied result to document before get template.html().

Fixed plunker.

With a little trick by using directive to complie template and provide the value back to your controller. Hope it works, any problems let me know plz.

.directive("htmlBuilder", htmlBuilder);

htmlBuilder.$inject = ["$http", "$compile", "$templateRequest", "$timeout"];

  function htmlBuilder($http, $compile, $templateRequest, $timeout) {

    return {
      restrict: 'EA',
      require: 'ngController',
      link: function(scope, $elements, attrs, ctrl) {

        $templateRequest("template.html").then(function(html) {
          var template = angular.element(html);
          $compile(template)(scope);

          //Apend to document before get innerHTML
          $elements.append(template);

          $timeout(function() {
            var res = $elements.html();
            ctrl.setResult(res);
          });
        });
      }
    }


  }

answered May 17, 2016 at 10:45

Yin Gang

1,4431 gold badge10 silver badges15 bronze badges

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

4 Comments

ocket-san Over a year ago

Thank you very much! I still have another problem: changes on the model do not reflect in the compiled html. I should have better explained that in my original question. I have updated the plunker to better reflect this. However, your answer does answer my question (and I really had no idea i should have append the template ) so its only fair to give you credit for it. Thanks!

Yin Gang Over a year ago

Check fixed plunder demo.

Yin Gang Over a year ago

@ocket-san, you are welcome, and fix watching and reflect in the compiled html. As using an isolated scope of directive, you can access controller's $scope by scope.$parent.

ocket-san Over a year ago

you are my hero! If I could, I would accept again :-). I also see I made some stupid mistakes... really thanks for the quick response and answer!

Collectives™ on Stack Overflow

create mail template with $compile in angularjs

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related