AngularJS - Get html from partial in directive

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:

  • The user completes the form and clicks submit.
  • The controller updates the model with a new object and emits a "formSubmitted" event with some args.
  • The directive listens for the event and fades out the form.
  • The directive loads a partial html filled with the args from the event.

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

How can it be done?

Edit: some sample code (simplified):

This is the form:

<section class="hero-unit {{containerClass}}" tk-jq-replace-children>
    <h2>{{formTitle}}</h2>
    <form class="form-search" name="solform" novalidate>
        <fieldset>
        ...

This is the controller:

if( formWasSavedOk ){
    $scope.formSubmittedMsg = msg;
//Here emits the custom event
    $scope.$emit( 'solicitud:formSubmitted' );
}

This is the directive:

.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( "<h2>{{formSubmittedMsg}}</h2>" )($scope) );
                        $scope.$apply();
                      });
            });
        }
    };
});

<h2>{{formSubmittedMsg}}</h2> 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)

I'm not sure if you are looking for the $http service. I have created a plunker http://plnkr.co/edit/13kFLh9RTsIlO4TaFIFQ?p=preview, which doesn't cover the first three steps, but covers the 4th step you need.

In the plunker click on the text "Click here to submit the form", and notice the new text is is inserted. This new text is from the external file called tmpl.html. In the firebug console, you can notice a get call after you clicked the text, to fetch the tmpl.html

I believe the "Angular way" to fetch an external html snippet would be to use the ng-include directive:

<ng-include
       src="{string}"
       [onload="{string}"]
       [autoscroll="{string}"]>
</ng-include>

As for why your directive didn't work, my guess is that you're fetching the html at the directive's link phase, rather than compile phase. There's a nice explanation on the difference on this answer, but it's pretty much this:

If you are going to make DOM transformation, it should be compile if you want to add some features are behavior changes, it should be in link.

I would recommend moving most of that logic away from the directive, to the controller: fetching the data using a $resource or $http service, and then passing the results to the newly created scope of the ng-directive.