Angularjs 如何从Typescript中的嵌套指令调用角度控制器作用域方法

给定以下常见设置：

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

我想通过使用指令属性-

CtrlA->directiveAA->directiveAAA

向下传递methodA，从directiveAAA调用CtrlA.methodA（）。因此，例如我的

directiveAAA

“Save”按钮可以调用控制器方法“Save”。组件

directiveAA

和

directiveAAA

都是哑组件，只知道给定属性设置的环境

在使用Typescript之前，我会利用继承的作用域从

directiveAAA

调用控制器方法

$scope.save（）

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

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

module app.page{
类CtrlPage{
私有ctrlPageBtnActions:string[]=['goPrev'，'goNext']；
goPrev（）{
console.log（'goprevious'）；
}
goNext（）{
log（'gonext'）；
}
}
函数pageDirective（）{
返回{
限制：'E'，
替换：正确，
模板：“”，
控制器：CtrlPage，
controllerAs:'ctrlPage'，
bindToController:true
}
}
角度。模块（'app'）
.指令（“第页”，第页指令）；
} 
模块app.page.directions{
类CtrlBtnBar{
私有操作：字符串[]；
}
函数buttonBar（）{
返回{
限制：'E'，
替换：正确，
模板：“”
控制器：CtrlBtnBar，
controllerAs:'CtrlBtnBar'，
bindToController：{
操作：'='
}
}
}
角度。模块（'app'）
.指令（“按钮栏”，按钮栏）；
}
模块app.page.directions{
类CtrlBtn{
私人行动：字符串；
handleClick（）{
如果（操作=='goNext'）{
CtrlPage.goNext（）；///这里是我需要帮助的地方
}
}
}
函数btnDirective（）{
返回{
限制：'E'，
替换：正确，
模板：“”，
控制器：CtrlBtn，
controllerAs:'ctrlBtn'，
bindToController：{
行动：“@”
}
}
}
角度。模块（'app'）
.directiveíve（'btn'，btnDirective）；
}

---

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

Typescript

with

AngularJS

（第1版）不会给angular的架构/设计带来任何变化。所以作用域就是作用域，它们将像以前一样被继承（通过

$new（）

）

此外，任何类型脚本

类

继承都不会对

$scope

继承产生影响。即使角度为2，这也不会改变。如果某个

组件

（有点像今天Typescript中的

控制器

类）将使用其父级（从父级派生）的代码，则在运行时它将对其上下文没有影响

所以，像您那样使用angular，从强类型语言支持中获益

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

---

这个问题似乎解决了在控制器类中使用词法“this”的问题。同样，这种行为与TS没有直接关系。

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);
}