嵌套的复杂指令没有被执行？

Question

我尝试通过John Lindquist 关注this youtube tutorial，他通过将指令分类为组件和容器来解释指令。
所以我试着这样做，有一个容器（幻灯片）可以容纳不同的项目（文本区域、图像、视频......），但我的例子更具动态性。
他的例子是这样的：

<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>

但我不知道为什么它不起作用，组件指令根本没有被执行，我认为隔离范围有问题，也许我错过了理解的东西。
Working example in 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)
在链接 (component-directive.js:7:11)
在 nodeLinkFn (angular.js:4774:13)
在 angular.js:4914:15
在 nodeLinkFn (angular.js:4768:24)
在 angular.js:4913:13
在 angular.js:9782:11
在 WrappedCallback (angular.js:7303:59) <div contenteditable="true" class="ng-scope editor text-content ng-binding" element="component" type="" ng-repeat="component in slide.components" editor=""> angular.js:6173
（匿名函数）angular.js:6173
（匿名函数）angular.js:5219
nodeLinkFn angular.js:4777
（匿名函数）angular.js:4914
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
完成 angular.js:10004
completeRequest angular.js:10180
xhr.onreadystatechange

从Marco Alves检查这个answer from。
所以组件指令是这样的：

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 example中工作正常。
任何帮助，在此先感谢。

Answer 1

对于初学者，您忘记将组件指令上的限制属性设置为 E...这就是它没有被编译的原因。

编辑 1：

可以渲染组件指令，但仍有其他错误。

看一看：http://plnkr.co/edit/ENkWIVUnHubxydWgB4pU?p=preview

编辑 2：

我想我解决了。 http://plnkr.co/edit/ENkWIVUnHubxydWgB4pU?p=preview

我变了：

• 移除了组件指令定义中的“E”属性
• 在 componente 指令链接器中使用 removeAttr 来删除类型和组件属性
• 更改了 index.html 以使用组件指令作为属性而不是元素