Javascript Angular 1.5使用另一个组件在函数中返回html结果_Javascript_Angularjs_Templates_Components

Javascript Angular 1.5使用另一个组件在函数中返回html结果

javascript angularjs templates

Javascript Angular 1.5使用另一个组件在函数中返回html结果,javascript,angularjs,templates,components,Javascript,Angularjs,Templates,Components,例如，我在html中有一个组件调用“people”，如下所示 <html> <people data="$ctrl.data" isAlive="$ctrl.status"></people> </html> 但是如果我想在另一个组件中调用人员组件，如何调用我尝试了这个解决方案，但它不起作用 import templateUrl from './main.html'; export const mainComponent = {

例如，我在html中有一个组件调用“people”，如下所示

<html>
    <people data="$ctrl.data" isAlive="$ctrl.status"></people>
</html>

但是如果我想在另一个组件中调用人员组件，如何调用

我尝试了这个解决方案，但它不起作用

import templateUrl from './main.html';

export const mainComponent = {
    bindings: {},
    templateUrl,
    controller: class MainComponent {
        constructor() {
            'ngInject';
        }

        $onInit() {
            this.data = { name : test }
            this.status = 'ALIVE'
            this.people = `<people data="${this.data}" 
                           isAlive="${this.status}">
                           </people>`
            console.log(this.people) //this should return a html template with 
                                     //  complete data
        }


    }
};

从“/main.html”导入模板URL；
导出常量主组件={
绑定：{}，
模板URL，
控制器：类MainComponent{
构造函数（）{
"ngInject",；
}
$onInit（）{
this.data={name:test}
this.status='ALIVE'
这个人`
`
console.log（this.people）//这应该返回一个带有
//完整数据
}
}
};

请告知

为什么要在控制器中生成人员组件模板？您只需将组件本身添加到辅助服务器的组件模板中即可

例如

角度.module（'app'，[]）

.component（'people'）{
模板：“我们是人”
})
.component（'alien'{
模版：`我们是外星人，但我们有人
`
})

更新

您可以在从外部库获取数据后立即将数据传递给组件

.component('people', {
  template: '<div style="color:green;">We are people, who got some {{$ctrl.data}}</div>',
  bindings: {
    data: '<'
  }
})


.component('alien', {
      template: `<div style="color:red">We are alien but we have people</div>
                        <people data="$ctrl.data.async"></people>`,
      controller: function($timeout) {

        $ctrl = this;

        $ctrl.data = {
          async: null
        }

        function getAsyncData() {
          $timeout(() => {
            $ctrl.data.async = "Fooooo"
          }, 1000);
        };

        getAsyncData();
      }
    })

.component（'people'）{
模板：“我们是人，他们得到了一些{{$ctrl.data}}”，
绑定：{
数据：'在您的示例中，您使用templateUrl
='./main.html'
。您想将放在何处。人？因为我使用外部库及其函数需要创建模板，然后发送到页面的元素
.component('people', {
  template: '<div style="color:green;">We are people, who got some {{$ctrl.data}}</div>',
  bindings: {
    data: '<'
  }
})


.component('alien', {
      template: `<div style="color:red">We are alien but we have people</div>
                        <people data="$ctrl.data.async"></people>`,
      controller: function($timeout) {

        $ctrl = this;

        $ctrl.data = {
          async: null
        }

        function getAsyncData() {
          $timeout(() => {
            $ctrl.data.async = "Fooooo"
          }, 1000);
        };

        getAsyncData();
      }
    })