是否有可能允许用户在angularjs应用程序中编辑和保存html模板

我有一个传统的asp.net应用程序，它读取HTML模板并在div控件中呈现它。使用引导xeditable用户可以编辑模板的某些部分（仅限文本）。该模板稍后用于发送电子邮件。此功能工作正常。现在我正在使用AngularJs和WebApi重写这个应用程序。我正在使用角路由来路由到应用程序的不同页面（纯html）。我能够使用指令加载模板。现在我想让用户编辑文本并保存完整的模板，以便稍后用于发送电子邮件。是否有可能允许用户在angularjs应用程序中编辑和保存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编辑文本，并将其保存作为以后使用的完整模板。这是可以实现的吗？

来源

2017-02-16 Prabi

没有！尽我所知编码你不能更新静态文件， –

@SaurabhAgrawal - 正如我所说，这已经发生在运行良好的asp.net应用程序中。我想实现在angularjs – Prabi

耶没有使用分贝你不能这样做 –

不要将其存储在文件中。将模板存储在数据库中。在那里提供一个默认值，这样如果用户还没有修改它，就会显示出来。

在您的指令中，通过您的API从数据库加载模板。完成之后，将模板追加到链接回调函数内的指令内容中，并编译指令（如果需要）。

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

请确保正确清理您的数据。这可能是相当危险的注入和编译用户创建的模板。

我希望这可以指引您正确的方向。

编辑

你可能不活动需要$编译步骤。这取决于你想要什么样的模板。如果它只是一个没有任何连接到角的简单元素，只需跳过$ compile行即可。

编辑2 - 显示屏上点击模板

请注意以下几点仅仅是一个非常简化的版本，但它应该指向你在正确的方向。

在你父控制器

$scope.state = { 
    displayTemplate: false 
};

在模板

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

来源

2017-02-16 21:30:41

优秀的人！你让我的星期五！在过去的两天里一直停留在此。我工作得很好。你能否回答一个问题？对不起，我可能听起来很愚蠢，但我对角度概念很陌生。有没有可能在点击按钮时加载此模板？如果我将它保存在指令中，则在加载页面时会加载它。我只想在用户想要加载时加载。此外，如果您还可以告诉我如何在另一个按钮上单击元素的内容，这将非常有帮助。 – Prabi

乐意提供帮助。看看我最后的编辑，看看如何实现按钮。 –

工作像魅力:)你可以请帮助保存部分？我尝试使用ng-model绑定自定义元素，然后保存点击阅读，但它是未定义的。如何读取这个自定义元素的html来保存它？ – Prabi

是否有可能允许用户在angularjs应用程序中编辑和保存html模板

回答

相关问题