来自控制器的访问指令方法

Posted

技术标签:

【中文标题】来自控制器的访问指令方法【英文标题】:Access Directive method from the Controller 【发布时间】:2018-04-19 15:28:15 【问题描述】:

我正在使用 Typescript 在 AngularJs 中编写应用程序,但在从控制器类访问指令中的方法时遇到问题。我将 'control: '=', 添加到指令的范围内,认为这会将指令中方法的控制绑定到控制器,但出现错误

控制器代码为:

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

【讨论】:

以上是关于来自控制器的访问指令方法的主要内容,如果未能解决你的问题,请参考以下文章

如何控制来自父组件的多个指令?

将 AngularJS 范围变量从指令传递到控制器的最简单方法?

在 ng-repeat 指令中创建控制器

从模态广播到指令

从模态广播到指令

AngularJS 指令属性从控制器访问