Is it possible to allow user to edit and save html

Question

I have an traditional asp.net application which reads HTML template and renders it inside div control. Using bootstrap xeditable user can edit certain parts of the template (only text). This template is later used to send emails. This functionality is working fine. Now I am rewriting this application using AngularJs and WebApi. I am using angular route to route to different pages (plain html) of the application. I am able to load the template using directive. now I want to allow user to edit the text and save the complete template so that it can be used later for sending email.

MyTemplate.html

<p>this is some text</p>
<p>this is some more text</p>
<p>this is some another text</p>

Directive

myapp.directive("customDirective", function () {
return {
    templateUrl: 'MyTemplate.html'
};
});

Notify.html

<div>
<h2>{{message}}</h2>
<input type="button" ng-click="Redirect()" value="Report" />
</div>
<custom-directive></custom-directive>

I want that user should be able to edit the text in MyTemplate.html and save it as complete template for later use. Is this achievable?

Answer 1

Do not store it in file. Store the template in your database. Provide a default value there, so something shows if the user has not modified it yet.

In you directive, load the template from your database through your API. After you do that, append the template to the contents of your directive inside your link callback function and compile the directive (if needed).

myapp.directive("customDirective", ($compile, yourService) => {
    return {
        link: (scope, elem) => {
            yourService.fetchTemplate().then(template => {
                elem.html(template);
                $compile(elem.contents())(scope);
            });
        }
    }
});

Please make sure to sanitise your data properly. It could be fairly dangerous injecting and compiling template created by the user.

I hope this points you in the right direction.

Edit

You might not event need the $compile step. It depends on what kind of template you have in mind. If it is just a simple element without any connection to angular, simply skip the $compile line.

Edit 2 - Display the template on click

Please note the following is just a very simplified version, but it should point you in the right direction.

In your parent controller

$scope.state = {
    displayTemplate: false
};

In your template

<my-template-directive ng-if="state.displayTemplate"></my-template-directive>
<button ng-click="state.displayTemplate = true">Show Template</button>