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

Question

我想通过绑定将自定义模板传递到gangularjs组件中，并使用他的范围将其呈现。这样的东西（伪代码，这是不起作用的）：

angular
  .module('myApp', [])
  .controller('mainController', ($scope) => {
    $scope.getTemplate = () => (`
      <div>
        <span>{{$ctrl.name}}</span>
      </div>
    `)
  })
  .component('myComponent', {
    controller: ($scope, $compile) => {
      const $ctrl = $scope.$ctrl;
      $ctrl.$onInit = () => {
        $ctrl.name = 'Hello World!';
      };
      $ctrl.compileTemplate = () => $compile($ctrl.template())($scope);
    },
    bindings: {
      template: '&'
    },
    template: `
      <div>
        My dynamic content: {{$ctrl.compileTemplate()}}
      </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>

有什么方法可以做？

Answer 1

如果您想要动态模板，可以利用一个事实，即可以将函数传递给组件template，在功能可注射的组件中，我将您转介给您此问题，以获取更多信息，以获取更多信息，更多信息，但这是主要想法：

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();
    }    
  });

Answer 2

您可以使用$compile服务来创建指令来处理所涉及的DOM操作。

以下工作片段实现了属性指令compile，该属性编译了控制器范围中属性的输入值。它基本上将您的模板添加到附加指令的元素的内部内容并最终对其进行编译。

angular.module('app', [])
  .run(($rootScope) => {  
    $rootScope.name = 'world';    
    $rootScope.template = `
      <label>Name</label>
      <input type="text" ng-model="name">
      <h2>Hello {{ name }}!</h2>
    `;
  })
  .directive('compile', ($compile) => {
    return (scope, element, attrs) => {
      scope.$watch(
        scope => scope.$eval(attrs.compile),
        value => {
          element.html(value);
          $compile(element.contents())(scope);
        }
      );
    };
  })

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.5/angular.js"></script>
<div ng-app="app">
  <div compile="template"></div>
</div>