Is It Possible To Allow User To Edit And Save Html Template In Angularjs Application

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 t

Solution 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-directiveng-if="state.displayTemplate"></my-template-directive><buttonng-click="state.displayTemplate = true">Show Template</button>