2017-11-07 5 views
1

私は、Typescriptを使用してAngularJsにアプリケーションを作成していますが、コントローラクラスからのディレクティブのメソッドにアクセスする際に問題があります。 「コントロールを: 『私は追加のコントローラへの指令のメソッドの制御を結合するであろう。このことを考えディレクティブのスコープに、』 =が、私はエラーを取得していますコントローラからのディレクティブメソッドへのアクセス

コントローラのコードは次のとおりです。

import {DaypartingSegmentsContainer} from "lib/js/publisher/deal/objects/dayparting/dayparting.segments.container"; 
 

 

 
@Component({ 
 
    bindings: { 
 
     deal: "=" 
 
    }, 
 
    controllerAs: "$ctrl", 
 
    module: DealApp, 
 
    require: { 
 
     DealForm: '^form', 
 
    }, 
 
    selector: 'deal-edit-dayparting', 
 
    template: require('./templates/deal.edit.dayparting.html'), 
 
}) 
 
@Inject(
 
    "$scope", 
 
    "$q" 
 

 
) 
 
export class DealEditDaypartingCtrl extends SxControllerBase { 
 

 
    public daypartingSegmentsContainer : DaypartingSegmentsContainer; 
 

 
    constructor(protected $scope : ng.IScope, 
 
       private $q : angular.IQService) { 
 
     super($scope); 
 
    } 
 

 
    public $onInit() : void { 
 
     let self : DealEditDaypartingCtrl = this; 
 

 
     this.daypartingSegmentsContainer.getCommonTimes(); 
 

 
    } 
 
}

ディレクティブクラスは次のとおりです。

import {Inject, Directive} from "lib/js/angularjs/decorators/sx-forward"; 
 
import DealApp from "lib/js/publisher/deal/lib.deal.app"; 
 
import DealEditDaypartingCtrl from "lib/js/publisher/deal/edit/deal.edit.dayparting"; 
 
import "lib/js/publisher/deal/objects/dayparting/dayparting.jquery.factory"; 
 
import {DaypartingDayName} from "lib/js/publisher/deal/objects/dayparting/dayparting.day.name"; 
 

 
import { 
 
    minutesToString, 
 
    stringToMinutes 
 
} from "lib/js/publisher/deal/objects/dayparting/dayparting.time.functions"; 
 

 
@Directive({ 
 
    selector: 'dayparting-segments-container', 
 
    require: '^dealEditDayparting', 
 
    replace: true, 
 
    module: DealApp, 
 
    scope: { 
 
     dayName: '<', 
 
     control: '=', 
 
    }, 
 
    template: require('./templates/dayparting.segments.container.html'), 
 
    controllerAs: '$ctrl', 
 
    link: function(scope : any, element : any, attrs : any, daypartingCtrl : DealEditDaypartingCtrl) : void { 
 
     scope.daypartingCtrl = daypartingCtrl; 
 

 
     // Delete button watch 
 
     scope.$watch(
 
      () => { 
 
       return daypartingCtrl.deleteSegment; 
 
      }, 
 
      (shouldDelete : boolean) => { 
 
       if (shouldDelete === true) { 
 
        scope.$ctrl.onDelete(); 
 
       } 
 
      } 
 
     ); 
 

 
     // Calendar leave watch 
 
     scope.$watch(
 
      () => { 
 
       return daypartingCtrl.calendarLeave; 
 
      }, 
 
      (calendarLeave : boolean) => { 
 
       if (calendarLeave === true) { 
 
        scope.$ctrl.onCalendarMouseLeave(); 
 
       } 
 
      } 
 
     ); 
 
    }, 
 
}) 
 

 
@Inject('$scope', 'JQueryFactory') 
 

 
export class DaypartingSegmentsContainer { 
 
    
 
    constructor(private $scope : any, 
 
       private JQueryFactory : any) { 
 
     this.tooltipIsOpen = false; 
 
     this.jquery = JQueryFactory.get(); 
 
    } 
 

 
    public getCommonTimes() : void { 
 

 
     console.log("i am in getCommon times!!!") 
 

 
    } 
 
} 
 

 

 
export default DaypartingSegmentsContainer;
コードは私にフルタイムで見つめていた Cannot read property 'getCommonTimes' of undefined

答えて

1

から

は、私が言って、コンソールのエラーを取得しておきます。

 scope.$watch(
 
      () => { 
 
       return daypartingCtrl.daypartingOninit; 
 
      }, 
 
      (daypartingOninit : boolean) => { 
 
       if (daypartingOninit === true) { 
 
        scope.$ctrl.getCommonTimes(); 
 
       } 
 
      } 
 
     );

:私は、下記のコードの一部とその今作業を追加しました
関連する問題