在组件上使用 $compile 时，为什么作用域通过 $parent 传递？

Question

我正在尝试使用 $compile 动态编译一个 Angular 组件，但是范围没有传递到组件范围，而是传递到 $parent 范围。

这是一个绑定到 myTitle 属性并呈现它的简单组件：

app.component('myComponent', {
  bindings: {
    myTitle: '<'
  },
  template: `
    <div>
      <div>Doesn't work: {{ $ctrl.myTitle}}</div>
      <div>Works: {{ $parent.$ctrl.myTitle}}</div>
    </div>`
});

然后在控制器（或指令等）中我使用 $compile:

编译它

app.controller('MainCtrl', function($scope, $element, $compile) {
  var template = '<my-component></my-component>';
  
  var bindings = {
    myTitle: 'My Title'
  }
  var scope = angular.extend($scope.$new(true), {
    $ctrl: bindings
  });
  var newElement = $compile(template)(scope);
  $element.append(newElement);
  
});

当运行这样时，它产生结果：

Doesn't work:

Works: My Title

Here's a plunker showing it in action

问题

我为动态创建的组件创建的范围如何作为组件的父范围传递？

任何关于为什么 angular 行为如此以及可能如何避免它的指示都非常受欢迎。

Answer 1

据我所知，您需要在此处传递绑定 var template = '<my-component></my-component>';

var template = '<my-component my-title="$ctrl.myTitle"></my-component>';

完整的组件可能是这样的：

app.controller('MainCtrl', function($scope, $element, $compile) { 
  var template = '<my-component my-title="$ctrl.myTitle"></my-component>'; 
  $scope.$ctrl = {myTitle: 'My Title'}; 
  $element.append($compile(template)($scope)); 
});

在组件上使用 $compile 时，为什么作用域通过 $parent 传递？

When using $compile on component, why is the scope passed through $parent?

angularjs

angularjs-compile

angularjs-components

问题