In my application, users are given the option to send a confirmation message. This message is pregenerated with a default value (which depends on some other context), but should be editable by the user.
在我的应用程序中,用户可以选择发送确认消息。此消息是使用默认值(取决于某些其他上下文)预生成的,但应由用户编辑。
In angularJS, the intent is that the pregenerated messages comes from a template. So for instance I would have Msg1.html and Msg2.html, each of which includes MsgCommon.html (presumably using ng-include). The resulting file is then interpolated with the current scope to provide the text version of the pre-generated message, which I would presumably put in a textarea.
在angularJS中,意图是预生成的消息来自模板。所以例如我会有Msg1.html和Msg2.html,每个都包含MsgCommon.html(可能使用ng-include)。然后使用当前作用域插入生成的文件,以提供预生成消息的文本版本,我可能会将其放在textarea中。
But I haven't found how to do this with angularJS. AngularJS rightly does not process the contents of , so I can't put a ng-include in there. And presumably there should be a ng-model on the textarea, so I would need to initialize in my controller the model element after processing the template. The following almost works:
但我还没有找到如何用angularJS做到这一点。 AngularJS正确地处理了内容,所以我不能在那里放一个ng-include。并且可能在textarea上应该有一个ng-model,所以我需要在处理模板后在我的控制器中初始化模型元素。以下几乎可行:
$http.get('msg1.html', {cache: $templateCache}).then(function(resp) {
$scope.msg = $interpolate(resp.data)($scope);
});
in html:
<textarea ng-model='msg'></textarea>
This correctly interpolates strings like {{...}} but will not process directives like ng-repeat or ng-include. I guess I need to use some form of $compile instead, but this expects a DOM string or element, and my message is not HTML.
这正确地插入了像{{...}}这样的字符串,但不会处理像ng-repeat或ng-include这样的指令。我想我需要使用某种形式的$ compile,但这需要一个DOM字符串或元素,而我的消息不是HTML。
Any ideas on how this could be done ?
关于如何做到这一点的任何想法?
1 个解决方案
#1
2
This solution is for demonstration purposes only. I do not recommend to use this in a real world scenario. I think it is better to use just $interpolate and create the necessary logic right in your controller. (ie. Instead of using ng-repeat you could concatenate your list in your controller and interpolate this string)
此解决方案仅用于演示目的。我不建议在现实世界中使用它。我认为最好只使用$ interpolate并在控制器中创建必要的逻辑。 (即。您可以在控制器中连接列表并插入此字符串,而不是使用ng-repeat)
The idea of this ugly solution is to compile a template and the use the innerText of the element to get the plain text only (Plunker):
这个丑陋的解决方案的想法是编译模板并使用元素的innerText来获取纯文本(Plunker):
$templateRequest('msg1.html').then(function(resp) {
var el = angular.element('<div></div>');
var templateScope = $scope.$new();
templateScope.name = 'Foo'
templateScope.tasks = ['t1', 't2', 't3', 't4'];
el.html(resp);
$compile( el.contents() )( templateScope );
setTimeout(function(){
$scope.msg = el[0].innerText;
$scope.$apply();
}, 10);
});
#1
2
This solution is for demonstration purposes only. I do not recommend to use this in a real world scenario. I think it is better to use just $interpolate and create the necessary logic right in your controller. (ie. Instead of using ng-repeat you could concatenate your list in your controller and interpolate this string)
此解决方案仅用于演示目的。我不建议在现实世界中使用它。我认为最好只使用$ interpolate并在控制器中创建必要的逻辑。 (即。您可以在控制器中连接列表并插入此字符串,而不是使用ng-repeat)
The idea of this ugly solution is to compile a template and the use the innerText of the element to get the plain text only (Plunker):
这个丑陋的解决方案的想法是编译模板并使用元素的innerText来获取纯文本(Plunker):
$templateRequest('msg1.html').then(function(resp) {
var el = angular.element('<div></div>');
var templateScope = $scope.$new();
templateScope.name = 'Foo'
templateScope.tasks = ['t1', 't2', 't3', 't4'];
el.html(resp);
$compile( el.contents() )( templateScope );
setTimeout(function(){
$scope.msg = el[0].innerText;
$scope.$apply();
}, 10);
});