Question

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

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

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

不幸的是，它似乎不起作用。从我读到的内容来看，transcluded块应该使用上述控制器的范围。有没有办法访问组件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`并在transclusion中访问父组件的控制器

1 个答案:

The DEMO