0

次の一般的な設定が与えられた場合:

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

ディレクティブ属性を使用してチェーンに methodA を渡すことにより、directiveAAA から CtrlA.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 が存在しないためです。btnDirective がダムであり、その親コン​​トローラーを認識せず、その属性からの入力のみを受け取る場合、angular $scope を使用して「goNext」メソッドにアクセスする必要がありますか? ラディムのヒントを考慮に入れると、答えはイエスだと思います。

4

1 に答える 1

2

Typescriptwith AngularJS (ver 1)は、角度のアーキテクチャ/設計に変更をもたらしません。したがって、スコープはスコープであり、継承されるのと同じように( 経由で.$new())

また、Typescriptclassの継承は継承に影響しません$scope。そして、それはAngular 2でも変わりません。一部(今日のTypescriptのクラスにcomponent 少し似controllerています)がその親からコードを使用する(そこから派生する)場合、実行時にはそのコンテキストには影響しません。

したがって、角度を使用して、強く型付けされた言語サポートから利益を得てください。

ディレクティブを使用した実際の例で、これらの Q & A を確認してください。

于 2015-12-05T18:44:04.320 に答える