angularjsに$ compileを含むメールテンプレートを作成

Question

私はそれにいくつかのCSSを持つ大きなhtmlファイルを持っています。このhtmlは、フォームに記入した後、フォローアップメールの本文を作成します。今実装されている方法は、文字列の連結によるものですが、私はそれが好きではありません。新しいhtml電子メール本文も大きくなっています。私は角度$コンパイル関数を使用してそれを行うことができると思ったが、私はそれが正しく動作することができません。

これはlink to the plunkです。私はthis（これはplunkの現在の状態です）と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); 
      }); 
     }); 
     } 
    } 


    }