0
我有我覺得應該是一個相當簡單的問題。我正在使用TypeScript + Angular應用程序。簡單的動態指令（帶動態控制器和範圍）？
在控制器中，我有一個類似的directives陣列我想使用。這些是我在整個應用中使用的panels。
我會給他們像controller，templateUrl，data等，他們看起來像這樣在我的控制器的各種屬性：
public panels: IPanelConfig[] = [
{
controllerName: "MenuController",
templateUrl: "menu/menu.html",
data: // an object with some boring stuff in it
},
{
controllerName: "AnotherController",
templateUrl: "another/this/is/arbitrary.html",
data: {}
}
];
在我view，我遍歷每個panel和使用通用directive稱爲panel，它處理剩下的工作。事情是這樣的：
<div ng-repeat="panel in vm.panels">
<div panel
paneldata="panel.data"
templateurl="panel.templateUrl"
ctrl="panel.controllerName"></div>
</div>
我定製panel指令如下：
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 the directive to the angular module
angular.module("app").directive("panel", [() => new App.Panel()]);
}
最後，我已經建立了動態控制器之一。在這種情況下，它是MenuController。這是很無聊的，看起來像這樣：
module App {
"use strict";
export class MenuController {
public scope: any = null;
public items: IMyItems[] = null;
public panelData: any = 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; // <--- the problem!!! :(
});
}
}
// add the controller to the module
angular.module("app").controller("MenuController", App.MenuController);
}
在這一點上，一切都像我期望它工作。 panelData已填充，使用了相應的view和controller，看起來好像我是這麼接近，但它還沒有完成。
問題： 麻煩的是，當我嘗試將MenuController的items陣列上使用ng-repeat。該視圖的行爲如同items是空的（並且它不是 - 簡單的console.log()證明它包含我所期望的）。
值得注意的是： 我最初構建了一個Menu指令具有相同的功能。 view，請求獲得items和循環的能力，接受panelData屬性等都完美運作。直到我試圖讓這個更具活力，我才遇到麻煩。
我真正想要的： 看來愚蠢我能有額外的panel指令漏斗通過當每個面板可能只是有自己的指令（這是一種我是如何開始的）。我真的希望能夠做的是一樣的東西：
<div ng-repeat="panel in vm.panels">
<div {{ panel.directiveName }} paneldata="panel.data"></div>
</div>
但是，這並不工作。
我很樂意提供任何建議或指導！
更新
我有一種預感，這個問題可能與scope，但我加了：
public test: string = "A test";
我MenuController在我看來，成功地顯示它。