如何避免 `require` 和 Access 中包含父组件的控制器

Question

我正在尝试构建一个接收对象作为输入的表单组件，并使用对象中定义的模板来 ng-include 正确的模板以呈现模型中定义的表单。

我遇到的问题是对象可能定义在上面的组件中。例如：

   <somecomponent>
     <formx object="$ctrl.settings"></formx>
   </somecomponent>

不幸的是，它似乎不起作用。从我读到的内容来看，嵌入的块应该使用上述控制器的范围。有没有办法访问组件的范围 somecomponent?

顺便说一句，我正在寻找的是做同样的事情：

 <div ng-controller="SomeController as ctrl">
   <formx object="ctrl.settings"></formx>
 </div>

但是我不想使用普通控制器，而是想使用一个组件而不使用显式要求，因为父组件可能会不时不同。

Answer 1

对于组件，ng-include 指令将子范围添加到隔离范围。嵌入的组件需要引用 $parent:

<somecomponent settings="'ss'">
    ̶<̶f̶o̶r̶m̶x̶ ̶o̶b̶j̶e̶c̶t̶=̶"̶$̶c̶t̶r̶l̶.̶s̶e̶t̶t̶i̶n̶g̶s̶"̶>̶<̶/̶f̶o̶r̶m̶x̶>̶
    <formx object="$parent.$ctrl.settings"></formx>
</somecomponent>

The DEMO

angular.module("app",[])
.component("somecomponent",{
  transclude: true,
  bindings: {settings:"<"},
  template: `
    <fieldset>
       somecomponent scope-{{$id}}
     <ng-transclude>
     </ng-transclude>
    </fieldset>
  `
})
.component("formx",{
  bindings: {object:"<"},
  template: `
     <fieldset>
       formx scope-{{$id}}<br>
       object={{$ctrl.object}}
     </fieldset>
  `
})

<script src="//unpkg.com/angular/angular.js"></script>
  <body ng-app="app">
   <somecomponent settings="'ss'">
     <formx object="$parent.$ctrl.settings"></formx>
   </somecomponent>
  </body>

如何避免 `require` 和 Access 中包含父组件的控制器

How to avoid `require` and Access the controller of the parent component in transclusion

angularjs

angularjs-ng-transclude

The DEMO