Javascript 如何通过绑定将模板传递到AngularJS组件

我想通过绑定将自定义模板传递到AngularJS组件中，并使用他的作用域进行渲染。类似这样的内容（伪代码，这不起作用）：

angular
.module（'myApp'，[]）
.controller（'mainController'，（$scope）=>{
$scope.getTemplate=（）=>(`
{{$ctrl.name}
`)
})
.component（'myComponent'{
控制器：（$scope$compile）=>{
常量$ctrl=$scope.$ctrl；
$ctrl.$onInit=（）=>{
$ctrl.name='Hello World！'；
};
$ctrl.compileTemplate=（）=>$compile（$ctrl.template（））（$scope）；
},
绑定：{
模板：“&”
},
模板：`
我的动态内容：{{$ctrl.compileTemplate（）}}
`
});

用法：

<div ng-controller="mainController as $ctrl">
  <my-component template="$ctrl.getTemplate()"></my-component>
</div>

<div>
  My custom content:
  <div>
    <span>Hello World!</span>
  </div>
</div>

预期结果：

<div ng-controller="mainController as $ctrl">
  <my-component template="$ctrl.getTemplate()"></my-component>
</div>

<div>
  My custom content:
  <div>
    <span>Hello World!</span>
  </div>
</div>

我的自定义内容：
你好，世界！

有什么办法吗？

您可以使用该服务创建一个指令来处理所涉及的DOM操作

下面的工作代码段实现了一个属性指令

compile

，该指令编译控制器范围内属性的输入值。它基本上是将您的模板添加到指令所附加的元素的内部内容中，并最终编译它

angular.module（'app'，[]）
.run（$rootScope）=>{
$rootScope.name='world'；
$rootScope.template=`
名称
你好{{name}}！
`;
})
.directive（'compile'，（$compile）=>{
返回（范围、元素、属性）=>{
范围.$watch(
scope=>scope.$eval（attrs.compile），
值=>{
html（值）；
$compile（element.contents（））（范围）；
}
);
};
})

---

如果您想要动态模板，您可以利用这样一个事实，即您可以将函数传递给组件

模板

，在函数可注入的组件中，我请您参考问题以了解更多信息，但主要思想如下：

angular
  .module('myApp', [])
  .factory('tempalteFactory', {
      return getTemplate() {
          retrun '<b> yep </b>';
      }
  })
  .component('myComponent', {
    controller: ($scope, $compile) => {
      const $ctrl = $scope.$ctrl;

      $ctrl.$onInit = () => {
        $ctrl.name = 'Hello World!';
      };   

    },
    template: function($element, $attrs, templateFactory) {
          'ngInject';

          return templateFactory();
    }    
  });

angular
.module（'myApp'，[]）
.工厂（“临时工厂”{
返回getTemplate（）{
重新运行“是”；
}
})
.component（'myComponent'{
控制器：（$scope$compile）=>{
常量$ctrl=$scope.$ctrl；
$ctrl.$onInit=（）=>{
$ctrl.name='Hello World！'；
};   
},
模板：函数（$element、$attrs、templateFactory）{
"ngInject",；
返回templateFactory（）；
}    
});

我想将指令的作用域注入到模板中。你可以在我的书里看到example@mattias好的，您只需在模板上添加指令

我想使用组件而不是指令来完成这项工作。您可以使用指令执行组件所做的任何操作，组件是一种更严格的指令类型，因此您无法使用组件进行编译，因此指令是一种方式。你到底想对组件做什么？谢谢，但是我想把指令的作用域注入到模板中你说的把作用域注入到模板中是什么意思？模板是针对一个作用域编译的，因此基于该作用域，它将根据您的绑定my进行评估，或者可能不起作用。我的意思是，在您的示例中，您将模板传递给一个使用var CompiletTemplate中所需作用域编译的绑定，但返回的是TemplateFactory不确定您为什么需要它，如果您详细说明您的问题，也许我可以帮助您，但我想您可以将该通用模板转换为另一个指令，并在组件中使用

ng switch

或

ng if

…我需要构建一个接收项目集合和模板的组件。它将迭代所有项目（使用ng重复），并为每个项目呈现自定义模板