[英]AngularJS $compile and external directive ui-codemirror
I am trying to use the external module, angular-ui-codemirror
, to display the $element.html()
of an enclosing AngularJS directive in a code-formatted block, using nested directive ui-codemirror
. 我正在尝试使用外部模块
angular-ui-codemirror
,使用嵌套指令ui-codemirror
在代码格式的块中显示封闭的AngularJS指令的$element.html()
。
If you want to know why I need to do this, look here . 如果您想知道为什么我需要这样做,请看这里 。
I can easily see from examples how to get this going with static text. 我可以从示例中轻松看到如何使用静态文本进行操作。 And I can pass the
innerHTML
of the enclosing directive alright. 而且我可以通过封闭指令的
innerHTML
。 It just doesn't compile afterward into a ui-codemirror
directive. 之后,它只是不会编译成
ui-codemirror
指令。
I see, here , that it is probably necessary to use the $compile
service to do this, but I cannot adapt that example to this situation. 我在这里看到可能需要使用
$compile
服务来执行此操作,但是我无法使该示例适应这种情况。
Here is some example AngularJS code: 这是一些AngularJS代码示例:
angular.module('articles', ['ui.codemirror']).directive('jsCode', function($compile) {
return {
restrict: 'E',
link: function($scope, $element) {
$scope.codeText = $element.html();
var template = '<div ' +
'ui-codemirror="{ ' +
'lineNumbers: true, ' +
'theme:\'twilight\', ' +
'readOnly: \'nocursor\', ' +
'lineWrapping: true, ' +
'mode: \'xml\'}" ' +
'ng-bind="codeText"></div>';
var linkFn = $compile(template);
var content = linkFn($scope);
$element.replaceWith(content)
}
};
});
and the html: 和html:
<js-code>
<html style="color: green">
<!-- this is a comment -->
<head>
<title>HTML Example</title>
</head>
<body>
The indentation tries to be <em>somewhat &quot;do what
I mean&quot;</em>... but might not match your style.
</body>
</html>
</js-code>
I created this Plunker to illustrate my dilemma. 我创建了这个Plunker来说明我的困境。 The first block is unformatted.
第一块未格式化。 The second block (static) is formatted.
第二个块(静态)被格式化。
replace in jsCode directive 替换jsCode指令
'ng-bind="codeText"></div>';
by 通过
'ng-model="codeText"></div>';
and use 和使用
$element.text()
instead of 代替
$element.html()
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.