Как назвать угловые методы в области видимости контроллера от вложенных директив в машинописном

Question

Учитывая следующую общую установку:

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 являются немыми компонентами и знают только об их окружении, учитывая их настройки атрибутов.

Перед машинописным текстом я использовал бы наследуемую область действия по цепочке для вызова метода контроллера $scope.save() от directiveAAA.

Как это работает с машинописью? Должны ли мы по-прежнему использовать внедренную область в наш контроллер, классы контроллеров директив или это можно сделать без использования области, основанной на наследовании класса?

Так вот мой вопрос в коде - его, вероятно, не является совершенным, но дает суть - в Nub проблемы отмечается с комментарием «это где мне нужна помощь»:

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 вы увидите, что машинописный текст, по понятным причинам, ссылается на ссылку CtrlPage изнутри контроллера btnDirective CtrlBtn, потому что в этом контексте CtrlPage не существует. Должен ли мы использовать угловую $ scope для доступа к методу «goNext», учитывая, что btnDirective тупой и не знает о своих родительских контроллерах и получает только данные от его атрибутов? Принимая во внимание наконечник радима, я думаю, что ответ «да».

Answer 1

Typescript с AngularJS(версия 1) не приносит каких-либо изменений угловому по архитектуре/дизайну. Так прицелы телескопы, и они будут наследоваться как они делали (через .$new())

Кроме того, любое Машинопись class наследство не имеет никакого влияния на $scope наследования. И это не изменится даже с Angular 2. Если какой-то component(немного как controller класс в TypScript сегодня) будет использовать код от своего родителя (исходя из этого) - во время выполнения он не будет влиять на его контексте.

Итак, используйте углы, как и вы, просто получайте прибыль от строго типизированной поддержки языка.

Проверить эти Q & А с рабочими примерами с директивами:

• How can I define my controller using TypeScript?
• How To bind data using TypeScript Controller & Angular Js
• Angular Ui-router can't access $stateParams inside my controller