Можно ли разрешить пользователю редактировать и сохранять html-шаблон в приложении angularjs

Question

У меня есть традиционное приложение asp.net, которое читает HTML-шаблон и отображает его внутри div-элемента управления. Использование bootstrap xeditable пользователь может редактировать определенные части шаблона (только текст). Этот шаблон позже используется для отправки писем. Эта функциональность работает нормально. Теперь я переписываю это приложение, используя AngularJs и WebApi. Я использую угловой маршрут для маршрутизации на разные страницы (простой html) приложения. Я могу загрузить шаблон с помощью директивы. теперь я хочу разрешить пользователю редактировать текст и сохранять полный шаблон, чтобы его можно было использовать позже для отправки электронной почты.

MyTemplate.html

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

Директива

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> 

Я хочу, чтобы пользователь должен иметь возможность редактировать текст в MyTemplate.html и сохранить его как полный шаблон для последующего использования. Возможно ли это?

Answer 1

Не храните его в файле. Сохраните шаблон в своей базе данных. Укажите здесь значение по умолчанию, поэтому что-то покажет, не изменил ли пользователь его.

В директиве вы загружаете шаблон из своей базы данных через свой API. После этого добавьте шаблон в содержимое своей директивы внутри функции обратного вызова ссылок и скомпилируйте директиву (при необходимости).

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

Пожалуйста, убедитесь, что вы правильно дезактивировали свои данные. Это может быть довольно опасный шаблон для инъекций и компиляции, созданный пользователем.

Надеюсь, это указывает на то, что вы в правильном направлении.

Редактировать

Вы не могли бы событие нужно шаг $ компиляции. Это зависит от того, какой шаблон вы имеете в виду. Если это простой элемент без какой-либо связи с угловым, просто пропустите строку $ compile.

Edit 2 - Отображение шаблона на клик

Пожалуйста, обратите внимание на следующее только очень упрощенная версия, но она должна направить вас в правильном направлении.

В вашем родительском контроллере

$scope.state = { 
    displayTemplate: false 
}; 

В шаблоне

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