Question

我尝试按this youtube tutorial John Lindquist跟踪this SO question，他通过将指令分类为组件和容器来解释指令。
所以我尝试这样做，有一个容器（幻灯片），将容纳不同的项目（textarea，图像，视频...）但我的例子更动态。
他的例子是这样的：

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

这并不是组件指令（取自Working example in Plunker）的所有内容都是一个指令，它将获取类型并将模板更改为正确的指令，例如，如果编辑器改变了这一点：

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

但我不知道为什么它不起作用组件指令根本没有被执行，我认为隔离范围有问题可能我想念了解。 Marco Alves。

更新

感谢answer from将缺少的限制指向我，我不记得我是否最初使用链接函数或编译函数编写示例但是它应该使用编译函数，因为解决方案是链接功能可能似乎工作但在打开控制台后出现一个奇怪的错误（至少对我来说很奇怪）：

错误：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）
  在link（component-directive.js：7：11）
  at nodeLinkFn（angular.js：4774：13）
  在angular.js：4914：15
  在nodeLinkFn（angular.js：4768：24）
  在angular.js：4913：13
  在angular.js：9782：11
  at 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
    范围。$ eval angular.js：8685
    范围。$ digest angular.js：8548
    范围。$ apply angular.js：8771
    完成angular.js：10004
    completeRequest angular.js：10180
    xhr.onreadystatechange

从Marco Alves查看plunker example 所以component指令是这样的：

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);
        };
      }
    }
  };
}]);

这个问题是组件指令仍然没有被编译，即使它在{{3}}中工作正常。
任何帮助，提前谢谢。

Answer 1

对于初学者，你忘了将组件指令的restrict属性设置为E ...这就是为什么它没有被编译。

编辑1：

让它呈现组件指令但仍有其他错误。

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

编辑2：

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

我改变了：

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

嵌套复杂指令不会被执行？

更新

1 个答案: