javascript - Simple dynamic directives (with dynamic controllers and scope)? -

i have feel should simple problem. working within typescript + angular application.

in controller, have array of similar directives i'd use. these panels i'm using throughout app.

i'll give them various attributes controller, templateurl, data, etc. in controller:

public panels: ipanelconfig[] = [     {         controllername: "menucontroller",         templateurl: "menu/menu.html",         data: // object boring stuff in     },     {         controllername: "anothercontroller",         templateurl: "another/this/is/arbitrary.html",         data: {}     } ]; 

in view, loop through each panel , use generic directive called panel handles rest of work. this:

<div ng-repeat="panel in vm.panels">     <div panel          paneldata="panel.data"          templateurl="panel.templateurl"          ctrl="panel.controllername"></div> </div> 

my custom panel directive looks this:

module app {     "use strict";      export class panel {          public link:(scope:angular.iscope, element:angular.iaugmentedjquery, attrs:angular.iattributes) => void;         public restrict:string = "ea";         public controller:string = "@";         public name: string = 'ctrl';         public replace:boolean = true;         public scope:any = {"paneldata": "="};          constructor() {             console.log("panel directive constructor");         }          public compile(el, attrs){             el.append("<div ng-include='\"components/panels/" + attrs.templateurl + "\"'>");         }     }      // add directive angular module     angular.module("app").directive("panel", [() => new app.panel()]);  } 

and finally, have 1 of dynamic controllers set up. in case, it's menucontroller. it's pretty boring , looks this:

module app {     "use strict";      export class menucontroller {          public scope: = null;         public items: imyitems[] = null;         public paneldata: = null;         public dataservice: idataservice = null;          static $inject = ["$scope", "dataservice"];          constructor($scope: any, dataservice: idataservice) {              $scope.vm = this;             this.scope = $scope;             this.dataservice = dataservice;              $scope.$watch("paneldata", (v) => { this.paneldata = v; });             this.init();          }          public init() {             this.dataservice.somerequesttogetitems().then((results) => {                 this.items = results; // <--- problem!!! :(             });         }      }      // add controller module     angular.module("app").controller("menucontroller", app.menucontroller);  } 

at point, everything works expect to. paneldata populated, appropriate view , controller used, seems so close, it's not quite there yet.

the problem: trouble when try use ng-repeat on menucontroller's items array. view behaves if items empty (and not -- simple console.log() proves contains expect).

worth noting: had built menu directive same functionality. view, request items , ability loop through, take in paneldata attribute, etc. worked perfectly. wasn't until attempted make more dynamic ran trouble.

what want: seems silly me have panel directive funnel through when each panel have own directive (which kind of how started). really want able like:

<div ng-repeat="panel in vm.panels">     <div {{ panel.directivename }} paneldata="panel.data"></div> </div> 

but doesn't work.

i love suggestions or guidance!

---

update

i had hunch issue may related scope, added a:

public test: string = "a test"; 

to menucontroller , displayed in view.

well... doesn't quite solve "why isn't working" question asking (and feel silly not trying while ago), way around problem (and handle dynamic directives/controllers), adding:

el.append("<div " + attrs.directivename + " paneldata='" + attrs.paneldata + "'></div>"); 

to panel directive's compile() function instead of doing template ng-include. still need have directive "funnel" solve problem (and else stumbles upon this!).