我尝试按照John Lindquist的这个 youtube 教程，他通过将指令分类为组件和容器来解释指令。
所以我试着这样做，有一个容器（幻灯片）可以容纳不同的项目（文本区域、图像、视频......），但我的例子更具动态性。
他的例子是这样的：
<panel title="{{title}}">
<element text="{{body}}"></element>
</panel>
但我的更像是这样的：
<slide ng-repeat="slide in slides" slide-id="{{slide.id}}">
<component
element="component"
type="{{component.type}}"
ng-repeat="component in slide.components"
>
</component>
</slide>
这并不是组件指令（取自this SO question）的全部内容，它是一个指令，它将采用类型并将模板更改为正确的指令，例如，如果编辑器更改此：
<component
element="component"
type="{{component.type}}"
ng-repeat="component in slide.components"
>
</component>
对此：
<component
element="component"
editor
ng-repeat="component in slide.components"
>
</component>
然后编辑器指令将通过将最后一个模板更改为：
<div
contenteditable="true"
class="editor text-content"
>
{{element.content.text}}
</div>
但我不知道为什么它不工作组件指令根本没有被执行，我认为隔离范围有问题，也许我错过了一些理解。
Plunker 中的工作示例。
更新：
感谢Marco Alves向我指出缺少的限制，我不记得我最初是使用链接函数还是编译函数编写示例，但它应该使用编译函数，因为带有链接函数的解决方案可能看起来是工作，但打开控制台后出现一个奇怪的错误（至少对我来说很奇怪）：
错误：InvalidCharacterError：DOM 异常 5
错误：指定了无效或非法字符，例如在 XML 名称中。
在 x.extend.attr(jquery.min.js:5:4051)
在 Function.x.extend.access(jquery.min.js:4:5847)
在 x.fn.extend.attr (jquery.min.js :5:715) 在 nodeLinkFn (angular.js:4774:13)
的链接 (component-directive.js:7:11)在 angular.js:4914:15 在 nodeLinkFn (angular.js:4768:24) 在 angular .js:4913:13 at angular.js:9782:11 at WrappedCallback (angular.js:7303:59) angular.js:6173 (匿名函数) angular.js:6173 (匿名函数) angular.js:5219 nodeLinkFn angular .js:4777 （匿名函数） angular.js:4914<div contenteditable="true" class="ng-scope editor text-content ng-binding" element="component" type="" ng-repeat="component in slide.components" editor="">
nodeLinkFn angular.js:4768
(匿名函数) angular.js:4913
(匿名函数) angular.js:9782
WrappedCallback angular.js:7303
WrappedCallback angular.js:7303
(匿名函数) angular.js:7340
Scope.$eval angular .js:8685
Scope.$digest angular.js:8548
Scope.$apply angular.js:8771
done angular.js:10004
completeRequest angular.js:10180
xhr.onreadystatechange
检查来自Marco Alves的答案。
所以组件指令是这样的：
app.directive('component', ['$compile', function($compile){
return {
restrict: "E",
compile:function(tElement, tAttrs){
var el = tElement[0];
if(el.getAttribute('type')){
el.removeAttribute('type');
el.setAttribute(tAttrs.type,'');
return function(scope){
$compile(el)(scope);
};
}
}
};
}]);
这样做的问题是组件指令仍然没有被编译，即使它在这个plunker 示例中工作正常。
任何帮助，在此先感谢。