如何从 Typescript 中的嵌套指令调用角度控制器范围方法答案

【问题标题】：How to call angular controller scope methods from nested directives in Typescript如何从 Typescript 中的嵌套指令调用角度控制器范围方法
【发布时间】：2015-12-05 18:30:29
【问题描述】：

鉴于以下常见设置：

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

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

在 Typescript 之前，我会利用继承范围从directiveAAA 调用控制器方法$scope.save()。

这将如何与 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 中运行代码，您将看到打字稿可以理解地反对来自 btnDirective 控制器 CtrlBtn 中的 CtrlPage 引用，因为在此上下文中 CtrlPage 不存在。我们必须使用 angular $scope 来访问“goNext”方法，因为 btnDirective 是愚蠢的并且不知道它的父控制器并且只接收来自其属性的输入？考虑到 radim 的提示，我想答案是肯定的。

【问题讨论】：

标签： angularjs scope typescript inherited

【解决方案1】：

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

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

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

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

【讨论】：

看起来问题解决了控制器类中词汇“this”的使用。同样，此行为与 TS 没有直接关系。