Geek Answers Handbook

AngularJS - Get html from partial in directive

I created a custom directive in angular so that I can disappear the form to submit and replace it with the template using a special message. The desired workflow is as follows:

  • The user fills out the form and clicks the submit button.
  • The controller updates the model with a new object and throws an event with "formSubmitted" with some arguments.
  • The directive listens for the event and fades out the form.
  • The directive loads a partial html filled with arguments from the event.

I allowed the first 3 steps, but I could not get around the last step (I do not want to hard-code html as strings, I want to pull it from another file, if possible).

How can I do that?

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 extract from the application /partials/create/createdOk.html (this is more than just a header, so I want to load it from a file)

+4
source share
2 answers

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

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

+2
source

I believe that the "Angular way" to use the external html fragment will use the ng-include directive :

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

Regarding why your directive does not work, I assume that you select html at the link stage, and not compile . There's a good explanation of the difference on this answer , but it is pretty much the following:

If you are going to convert the DOM, it should be compiled, if you want to add some functions, these are behavioral changes, they should be in the link.

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

+2
source

More articles:


All Articles