Question

给出以下常见设置：

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

我想通过使用指令属性 - CtrlA -> directiveAA -> directiveAAA将methodA向下传递给directiveAAA来调用CtrlA.methodA（）。例如，我的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中运行代码，你会看到bsnDirective控制器CtrlBtn中可以理解的对象是CtrlPage引用，因为在这个上下文中，CtrlPage不存在。我们必须使用angular $ scope来访问“goNext”方法，因为btnDirective是哑的并且不知道它的父控制器并且只接收来自其属性的输入吗？考虑到radim的提示，我猜答案是肯定的。

Answer 1

带有Typescript （ver 1）的

AngularJS不会对角度的架构/设计带来任何变化。所以范围是范围，它们将继承，因为它们（通过.$new()）

此外，任何Typescript class继承都不会对$scope继承产生影响。即使使用Angular 2，这也不会发生变化。如果某些component （今天在Typescript中有点像controller类）将使用其父（从中派生） - 在运行时它对上下文没有影响。

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

检查这些Q＆amp; A带有指令的工作示例：

如何从Typescript

1 个答案: