如何使用 AngularJS 加载动态指令内容？ [复制]

Question

我很难尝试使用 Angular 实现动态加载的内容...我有几个小部件，它们的 partialName 变量在请求后通过绑定加载。这就是我在下面使用scope.$watch 的原因。即使模板设置了正确的内容，视图本身也不会刷新以显示适当的内容。我已经尝试过类似下面的$broadcast，但没有成功。我怎样才能做到这一点？谢谢！

export class CioTemplateLoader implements ng.IDirective {
  public template: string;
  public partials: { [id: string]: string; } = {};
  public scope = {
    partialName: '='
  };
  public route: any;

  static $inject = [
    '$route'
  ];

  constructor(){//$route: any) {
    // this.route = $route;
    this.partials['claimOverview'] = require('../../claims/claim-overview.html');
    //...
  }

  link = (scope: ng.IScope, elem: JQuery, attributes: ng.IAttributes) => {
    var that = this;
    scope.$watch('partialName', function (value: string) {
      if (value) {
        that.template = that.partials[value];
        debugger;
        scope.$broadcast("REFRESH");
      }
    });
  }

  public static Factory(): angular.IDirectiveFactory {
    var directive = () => {
      return new CioTemplateLoader();
    };

    return directive;
  }
}

Answer 1

您想要做的是动态编译 html 模板并渲染它们，对吗？如果是这样，这个问题可能会被标记为重复，例如Compiling dynamic HTML strings from database