来自控制器的访问指令方法
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();
);
【讨论】:
以上是关于来自控制器的访问指令方法的主要内容,如果未能解决你的问题,请参考以下文章