使用$ compile在angularjs中创建邮件模板 [英] create mail template with $compile in angularjs

问题描述

我有一个大的html文件与一些CSS。这个html在填写表单后形成后续电子邮件的正文。现在实现的方式是通过字符串连接，我不喜欢。新的html电子邮件正文也较大。我想我可以使用angulars $ compile函数，但我不能让它正常工作。

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.

这是链接到plunk 。我尝试过这（这是plunk的当前状态），并且此问题的答案。

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.

完成的和'interpolated'（无论什么意思）字符串是服务器的REST调用的参数，它将发送实际的电子邮件。所以我想在一个函数中保持模板的创建，用户可以使用例如ng-click来执行。这是我的意思：

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.

推荐答案

您需要将已完成的结果附加到 / code> before get template.html（）。

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

固定 plunker 。

Fixed plunker.

通过使用指令来修改模板并将值提供给控制器，有一点小技巧。希望它的工作，任何问题让我知道plz。

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);
          });
        });
      }
    }


  }

这篇关于使用$ compile在angularjs中创建邮件模板的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！