在angularjs中使用$ compile創建郵件模板

Question

我有一個大的HTML文件，其中包含一些CSS。填寫表格後，該html形成了用於跟進電子郵件的正文。現在它的實現方式是通過字符串連接，我不喜歡。新的HTML電子郵件正文也更大。我想我可以使用angulars $編譯功能，但我不能讓它正常工作。

這是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

您需要在獲得template.html()之前追加complied result至document。

固定plunker。

通過使用directive編寫模板並將值提供給您的控制器有一個小技巧。希望它的作品，任何問題讓我知道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); 
      }); 
     }); 
     } 
    } 


    }