因此，我正在努力扩展名为Tapestry（https://github.com/PebbleRoad/tapestry）的此模式库应用程序的功能。目前，该应用程序能够读取JSON和Markdown数据，然后在用户透视图中显示它。
它现在正在做的是使用名为“标记”的插件来记录降价文件。 （https://github.com/chjj/marked）并提取内容，将其分为描述和内容。以下是Markdown文件的示例：
---
name: Accordion
description: |
### What
Puts modules of content into a linear stack of panels that can be closed and opened independently of each other. The accordion also helps in shortening a page and making it more scannable.
### Use when
The content modules are mutually exclusive. Content modules can consist of a list of items, links or text blocks.
---
<!-- Accordion-->
<div class="ui-accordion">
<div class="accordion__header">Accordion item 1</div>
<div class="accordion__content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod temporial incididunt ut labore et dolore magna aliqua. At enim ad minim veniam,</p>
</div>
<div class="accordion__header">Accordion item 3</div>
<div class="accordion__content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod temporial incididunt ut labore et dolore magna aliqua. At enim ad minim veniam,</p>
</div>
<div class="accordion__header">Accordion item 3</div>
<div class="accordion__content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod temporial incididunt ut labore et dolore magna aliqua. At enim ad minim veniam,</p>
</div>
</div>
<!-- / Accordion -->
现在，出于我的目的，我需要通过能够包含每个组件的Javascript和CSS来扩展功能，不幸的是我不熟悉Angular或标记为此，我不能似乎通过在降价处添加额外标签并尝试处理它来做到这一点。
这是处理所有信息的当前角度指令。
.directive('rawInclude', [
'$http', '$templateCache', '$compile', '$q', '$timeout',
function ($http, $templateCache, $compile, $q, $timeout) {
var totalcount = 0
return {
restrict: 'A',
terminal: true,
scope: {
patterns: '='
},
compile: function (telement, attr) {
var srcExp = attr.src, count = 0;
return function (scope, element) {
scope.$watch('patterns', function(newValue){
if(newValue){
if(scope.patterns && scope.patterns.children) totalcount = scope.patterns.children.length
}
}, true)
var changeCounter = 0
scope.$watch(srcExp, function (src) {
var thisChangeId = ++changeCounter;
if (src) {
$http.get(src, { cache: $templateCache }).success(function (response) {
if (thisChangeId !== changeCounter) return;
/* Increment counter */
count++;
/**
* Parsing Markdown files
* @type {Object}
*/
var parsedContent = {
yaml: '',
markdown: '',
html: '',
meta: {}
};
var re = /^(-{3}(?:\n|\r)([\w\W]+?)-{3})?([\w\W]*)*/
, results = re.exec(response.trim())
, conf = {}
, yamlOrJson,
name = "content"
if((yamlOrJson = results[2])) {
if(yamlOrJson.charAt(0) === '{') {
conf = JSON.parse(yamlOrJson);
} else {
conf = jsyaml.load(yamlOrJson);
}
}
conf[name] = results[3] ? results[3] : '';
/* Add description */
var $description = element.parent().next();
if(conf.description){
parsedContent.markdown = marked(conf.description);
$description.html(parsedContent.markdown)
}else{
/* If there is no description: Hide it */
$description.hide()
}
/* Element preview */
element.html(conf.content)
/* Compile Angular directives */
$compile(element.contents())(scope);
/* Trigger element added */
if(count == totalcount) {
$timeout(function(){
angular.element('body').trigger('tapestry.completed')
},500)
}
/* Element Syntax highlight */
var code = element.closest('.block--example').find('code.html');
var jscode = element.closest('.block--example').find('code.js');
$element = element.clone();
/* Adds codes to the code block */
code.text(conf.content.trim());
jscode.text(results[2]);
/* Highlighting */
Prism.highlightElement(code[0]);
Prism.highlightElement(jscode[0]);
}).error(function () {
if (thisChangeId === changeCounter) element.html('');
});
}
else element.html('');
});
};
},
link: function(scope, element, attrs){
if(scope.$last){
console.log("hey")
}
}
};
}])
我添加了jscode位。显然这是一个非常具体的问题，但我确信任何具有一点Angular知识的人都能够提供帮助。先谢谢你，我期待着你的回答。
如果问题不清楚，请道歉。
我需要能够在markdown文件中添加和解析其他部分。例如，css的区域，JS的区域等。如何做？