How to load dynamic directive content using AngularJS?

Question

I'm having a hard time trying to implement a dynamic loaded content using Angular... I have several widgets and their partialName variable is loaded via binding, after a request. That's why I'm using scope.$watch below. Even though the template is set with its correct content, the view itself doesn't refresh to display the appropriate content. I've tried somethings like the $broadcast below with no luck. How can I achieve this? Thanks!

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

score 1 · Accepted Answer · edited May 23 '17 at 11:44

1

what you want to do is compile dynamically html templates and render them, right? If so, this question might be marked as duplicate as for example Compiling dynamic HTML strings from database

edited May 23 '17 at 11:44

Community

1
1

answered May 30 '16 at 13:42

Luke

8,235
3
22
36

Thanks, I'm going to check on that and get back to you. – eestein May 30 '16 at 13:47
You are correct, that was the answer and this can be marked as a duplicate [I just did that]. Thanks! – eestein May 30 '16 at 14:13

How to load dynamic directive content using AngularJS?

1 Answers1