Question

我觉得应该是一个相当简单的问题。我在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，似乎我如此接近，但它还没有完全存在。

问题： 问题是当我尝试在ng-repeat的{{1}}数组上使用MenuController时。该视图的行为就好像items为空（并且它不是 - 简单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";并在我的视图中成功显示。

Answer 1

嗯......这并不是相当解决了“我为什么不工作”这个问题我原来问的问题（而且我不想在不久前尝试这个问题感到愚蠢），而另一个解决我的问题（并处理动态指令/控制器）的方法是添加：

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

到我的panel指令的compile()函数，而不是使用ng-include执行模板。我仍然需要一个指令“漏斗”，但这将解决我现在的问题（并希望其他人偶然发现它！）。

简单的动态指令（带动态控制器和范围）？

1 个答案: