如何避免`require`并在transclusion中访问父组件的控制器答案

【问题标题】：How to avoid `require` and Access the controller of the parent component in transclusion如何避免`require`并在transclusion中访问父组件的控制器
【发布时间】：2018-05-15 20:59:16
【问题描述】：

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

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

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

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

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

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

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

【问题讨论】：

一个被嵌入的块得到它的父控制器，而不是它被嵌入的地方，所以somecomponent有它自己的控制器，但是formx有它自己的控制器，但也可以访问它的父控制器，它是父控制器不是某个组件，而是它们都驻留在其中的页面/组件。
@bryan60 是的，这是我在问题中写的问题。

标签： angularjs angularjs-ng-transclude

【解决方案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>

【讨论】：

啊，对了，我以为应该这么简单，但在调试时没有在$scope 中看到$parent。谢谢