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在我看来，成功地显示它。