title: AngularJS - Get html from partial in directive
body: <p>I created a custom directive in angular so that I can fade out a form on submit and replace it with a template with a custom message.
  The desired workflow is as follows:</p>
  
  <ul>
  <li>The user completes the form and clicks submit.</li>
  <li>The controller updates the model with a new object and emits a "formSubmitted" event with some args.</li>
  <li>The directive listens for the event and fades out the form.</li>
  <li>The directive loads a partial html filled with the args from the event. </li>
  </ul>
  
  <p>I resolved the first 3 steps, but I wasn't able to get around the final step (I don't want to hardcode the html as Strings, I want to pull it from another file if possible).</p>
  
  <p>How can it be done?</p>
  
  <p>Edit: <em>some sample code (simplified):</em></p>
  
  <p>This is the form:</p>
  
  <pre><code>&lt;section class="hero-unit {{containerClass}}" tk-jq-replace-children&gt;
      &lt;h2&gt;{{formTitle}}&lt;/h2&gt;
      &lt;form class="form-search" name="solform" novalidate&gt;
          &lt;fieldset&gt;
          ...
  </code></pre>
  
  <p>This is the controller:</p>
  
  <pre><code>if( formWasSavedOk ){
      $scope.formSubmittedMsg = msg;
  //Here emits the custom event
      $scope.$emit( 'solicitud:formSubmitted' );
  }
  </code></pre>
  
  <p>This is the directive:</p>
  
  <pre><code>.directive( 'tkJqReplaceChildren', function( $compile ){
      return {
          link: function( $scope, $iElement/*, $iAttrs*/ ){
              //The directive listens for the event
              $scope.$on( 'solicitud:formSubmitted', function( /*event*/ ){
                  $iElement
                      .children()
                      .fadeOut(1000)
                      .promise()
                      .done(function(){
                          var $detachedElments = $(this).detach();
                          //The html is compiled and added to the DOM
                          $iElement.html( $compile( "&lt;h2&gt;{{formSubmittedMsg}}&lt;/h2&gt;" )($scope) );
                          $scope.$apply();
                        });
              });
          }
      };
  });
  </code></pre>
  
  <p><code>&lt;h2&gt;{{formSubmittedMsg}}&lt;/h2&gt;</code> is the code I want to pull from app/partials/create/createdOk.html (it is way more than just a header, that's why I want to load it from a file)</p>