0

鉴于以下常见设置：

CtrlA (page level controller)
  |- directiveAA (component e.g. button bar)
    |- directiveAAA (sub-component e.g. button)

我想调用 CtrlA.methodA() 从directiveAAA 通过使用指令属性将methodA 向下传递链 - CtrlA -> directiveAA -> directiveAAA。因此，例如我的directiveAAA“保存”按钮可以调用控制器方法“保存”。组件directiveAA和directiveAAA是哑组件，仅在给定属性设置的情况下才知道它们的环境。

在 Typescript 之前，我会利用沿链的继承范围$scope.save()从directiveAAA.

这将如何与 Typescript 一起使用？我们是否仍然需要在控制器、指令控制器类中使用注入作用域，或者这可以在不使用作用域的情况下基于类继承来完成吗？

所以这是我在代码中的问题 - 它可能并不完美，但给出了要点 - 问题的核心标有注释“这是我需要帮助的地方”：

module app.page {

    class CtrlPage {
        private ctrlPageBtnActions: string[] = ['goPrev', 'goNext'];
        goPrev(){
            console.log('go previous');
        }
        goNext(){
            console.log('go next');
        }
    }

    function pageDirective(){
        return {
            restrict: 'E',
            replace: true,
            template: '<button-bar actions="CtrlPage.ctrlPageActions"></button-bar>',
            controller: CtrlPage,
            controllerAs: 'ctrlPage',
            bindToController: true
        }
    }

    angular.module('app')
        .directive('page', pageDirective);
} 


module app.page.directives {

    class CtrlBtnBar {
        private actions: string[];
    }

    function buttonBar() {
        return {
            restrict: 'E',
            replace: true,
            template: '<div class="buttonBar"><btn action="CtrlBtnBar.actions[0]"></btn><btn action="CtrlBtnBar.actions[1]"></btn></div>'
            controller: CtrlBtnBar,
            controllerAs: 'CtrlBtnBar',
            bindToController: {
                actions: '='
            }
        }
    }

    angular.module('app')
        .directive('buttonBar', buttonBar);
}

module app.page.directives {
    class CtrlBtn {
        private action: string;
        handleClick(){
            if (action === 'goNext'){
                CtrlPage.goNext(); /// Here is where I need help
            }
        }
    }

    function btnDirective(){
        return {
            restrict: 'E',
            replace: true,
            template: '<input type="button" value="someCaption" ng-click="CtrlBtn.handleClick()"/>',
            controller: CtrlBtn,
            controllerAs: 'ctrlBtn',
            bindToController: {
                action: '@'
            }
        }
    }

    angular.module('app')
        .directíve('btn', btnDirective);
}

如果您在http://www.typescriptlang.org/Playground中运行代码，您将看到 typescript 可以理解地反对 btnDirective 控制器 CtrlBtn 中的 CtrlPage 引用，因为在此上下文中 CtrlPage 不存在。我们必须使用 angular $scope 来访问“goNext”方法，因为 btnDirective 是愚蠢的并且不知道它的父控制器并且只接收来自其属性的输入？考虑到 radim 的提示，我想答案是肯定的。

4

1 回答 1

2

Typescriptwith AngularJS (ver 1)不会给 Angular 的架构/设计带来任何改变。所以作用域就是作用域，它们会像以前一样被继承（通过.$new()）

此外，任何 Typescriptclass继承对继承都没有影响$scope。即使使用 Angular 2，这也不会改变。如果某些component （有点像controller今天的 Typescript 中的类）将使用其父级（派生自它）的代码 - 在运行时它将对其context没有影响。

所以，像你一样使用角度，只是从强类型语言支持中获益。

使用带有指令的工作示例检查这些问答：

于 2015-12-05T18:44:04.320 回答