Question

我有一个大的html文件，里面有一些css。填写表格后，此html构成了跟进电子邮件的正文。它现在实现的方式是字符串连接，我不喜欢。新的HTML电子邮件正文也更大。我想我可以使用angulars $ compile函数来完成它，但我无法让它正常工作。

这是link to the plunk。我尝试了this（这是插件的当前状态）以及the answer of this question。

完成和'插入'（无论这意味着）字符串是服务器REST调用的参数，它将发送实际的电子邮件。因此，我希望将模板的创建保留在用户可以执行的功能中，例如ng-click。这就是我的意思：

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

           });
          }

我真的好奇为什么它不起作用。

Answer 1

在获得complied result之前，您需要将document附加到template.html()。

已修复plunker 。

使用directive编译模板并将值提供给控制器。希望它有效，任何问题都让我知道了。

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


  }

使用angularjs中的$ compile创建邮件模板

1 个答案: