Javascript 如果指令包含在另一个指令中，如何在隔离范围中添加双向数据绑定属性？

如果指令包含在另一个指令中，如何在隔离范围中添加双向数据绑定属性？？ index.html

<event event-width width="width"></event>

编译器引发此错误：错误：[$compile:multidir]多个指令[event，eventWidth]要求在

如何读取和设置事件作用域外部声明的width属性？？

---

请用优雅的方式

我可以问一下你为什么要制定你的指令吗？通常的做法是使用directives文件夹，然后在directives文件夹中创建每个指令作为自己的js文档。因为每个指令都应该执行它执行的一个特定任务。然后您将在DOM中引用这些指令。嵌套指令带走了代码的模块性

您得到的错误代码似乎与此嵌套指令有关。 从本质上讲，指令应该非常简单，实际上，如果您认为此任务是可重用且经常使用的任务，那么您应该只创建一个指令。比如导航栏等的购物车指令

---

我会尝试重新思考你希望完成这项任务的方式

Angular可以嵌套指令，并具有处理该指令的功能。但这不是你正在做的。您正在尝试向同一元素添加两个指令，这两个指令都有一个独立的作用域，这显然是它不喜欢的

出现此错误是因为它们都有一个独立的作用域，请从其中一个中删除该独立的作用域，它将正常工作

阅读这篇关于指令中作用域的文章

你可以想象这会把它搞糊涂

或者你也可以像这样把它们筑巢。有很多解决方案

添加require:“^event”将允许您访问该控制器。您可以将其传递到子指令控制器，如我所示的“eventCtrl”。然后，可以从子控制器使用父控制器中使用“this”的任何内容

这可能会变得更加复杂和健壮，但我建议研究requireon指令和child指令

---

这篇文章可能会有所帮助

嵌套指令肯定有一些用例，但它并没有去除模块性。例如，ng模型可以嵌套在form指令下。类似地，ng模型选项需要ng模型。我也完全不明白你所说的folder是什么意思OP还没有嵌套指令，你既没有提供解决方案也没有回答问题。您对自定义指令的体验似乎是围绕使用模板的元素指令展开的。然而，这只是一个用例，您的示例听起来更像是误用，但这是一种观点。指令封装任何逻辑！这涉及到DOM。可重用性很重要，但这不是指令存在的理由。请注意，对于您的情况，您可能只需要将其设置为一个指令。除非你必须这样做，否则你不应该这样做。不是因为它不好，而是因为它更容易处理。。我在标题中出错，现在已更新。。现在我需要一天来理解答案：这就是我一直在寻找的。。谢谢；你已经回答了我的问题。。。我低估了所需的财产。。我假设了另一个意思。谢谢,；为什么需要在同一元素上具有双向绑定的两个指令？指令更新外部范围的反向绑定通常用于ng模型。这些是作为模板的一部分创建的，通常只有一个指令应用模板。因为我需要计算外部元素标记的宽度，所以我需要知道事件的宽度，并将相关的宽度分配给ul元素

ll.directive('event',function() {
return {
    restrict: 'E',
    scope:{              //error !!! Error: [$compile:multidir] Multiple directives [event, eventWidth] asking for new/isolated scope on
        event: '='       
    },
    templateUrl: function (attr, elem) {
        return 'app/template/' + elem.template;
    },
    link:function(scope,elem,attr){
        console.log(scope.width)
    }
}
});

ll.directive('eventWidth',function() {
    return {
        restrict: 'A',
        scope:{
            width: '='
        },
        link:function(scope,elem,attr){

        }
    }
});

<event>
  <event-width width='500'></event-width>
</event>

ll.directive('eventWidth',function() {
  return {
    restrict: 'A',
    require: '^event',
    scope:{
        width: '='
    },
    link:function(scope,elem,attr, eventCtrl){

    }
  }
});