嗨,我正在尝试在Typescript中用控制器编写angularJS指令,但是我似乎无法让我的构造函数在控制器内触发。我已经在互联网上进行了广泛的搜索,但是由于大多数人都没有在angularJS中使用打字稿,因此无法找到很多信息。我正在使用的angularJS版本是1.5.10。任何对此问题的见识将不胜感激。
class AdvancedFindDirective implements ng.IDirective {
public link: (scope: ng.IScope, element: ng.IAugmentedJQuery, attrs: ng.IAttributes) => void;
public restrict = "EA";
public scope: { advancedFindModel: "=" };
public template = `<input type="text" name="advancedSearch" id="advancedSearch" maxlength="100" placeholder="{{vm.placeholder}}" style="width: 400px;"><br />
<a href="#" ng-click="vm.showAdvancedWorkerFind()" ng-if="!vm.isEmployer">Advanced worker find</a>`
public controller: AdvancedFindDirectiveController;
public controllerAs: "vm";
public bindToController: true;
constructor() {
AdvancedFindDirective.prototype.link = (scope: ng.IScope, element: ng.IAugmentedJQuery, attrs: ng.IAttributes) => { };
}
static Factory(): ng.IDirectiveFactory {
const directive = () => {
return new AdvancedFindDirective();
};
return directive;
}
}
class AdvancedFindDirectiveController {
private advancedFindModel: AdvancedFindModel;
private isEmployer = false;
private placeHolder = "- Select Worker -";
static $inject = [
"$element",
"$attrs",
"$scope",
"$mdPanel",
"iMISApiService",
"parseGenericEntityData"];
constructor(public readonly $element: ng.IAugmentedJQuery,
public readonly $attrs: ng.IAttributes,
public readonly $scope: ng.IScope,
public readonly $mdPanel: ng.material.IPanelService,
public readonly iMISApiService: IiMISApiService,
public readonly parseGenericEntityData: IParseGenericEntityData) {
if (this.$attrs.employer === "") {
this.isEmployer = true;
this.placeHolder = "- Select Employer -";
this.initEmployerSearch();
} else {
this.initWorkerSearch();
}
}
private showAdvancedWorkerFind(): void {
const config = {
attachTo: angular.element(document.body),
controller: PanelAdvancedWorkerFindController,
controllerAs: "vm",
locals: {
onClose: (mdPanelRef: any) => {
const panelScope = mdPanelRef.config.scope.vm as PanelAdvancedWorkerFindController;
this.advancedFindModel.selectedWorkerId = panelScope.selectedImisId;
let workerEmployer = panelScope.primaryEmployer ? panelScope.primaryEmployer : 'N/A';
this.advancedFindModel.selectedWorker = `${panelScope.lastName}, ${panelScope.firstName} (${workerEmployer}) - ${this.advancedFindModel.selectedWorkerId}`;
this.$element.find("#advancedSearch").val(this.advancedFindModel.selectedWorker);
},
disableParentScroll: true,
templateUrl: `${gWebRoot}/Custom/Templates/PanelAdvancedWorkerFindController.html`,
hasBackdrop: true,
zIndex: 50,
position: this.$mdPanel.newPanelPosition().absolute().center(),
panelClass: "bsi-panel",
clickOutsideToClose: false,
escapeToClose: false,
onDomAdded: () => {
angular.element("body").css("top", "unset");
}
}
} as ng.material.IPanelConfig;
this.$mdPanel.open(config).then((mdPanelRef: any) => {
const panelScope = mdPanelRef.config.scope.vm as PanelAdvancedWorkerFindController;
panelScope.init();
});
}
private initWorkerSearch(): void {
let input: any = this.$element.find("#advancedSearch");
input.autocomplete({
delay: 500,
source: (request, response) => {
let result: any;
if (this.isNumber(request.term)) { //search by id
result = this.iMISApiService.AjaxQueryIQA("$/.UNITE_HERE/Membership/Searches/Worker%20Payment%20Worker%20ID%20Search", [request.term]);
} else if (this.$element.find("#advancedSearch").val().length > 0) { //search by worker name
result = this.iMISApiService.AjaxQueryIQA("$/.UNITE_HERE/Membership/Searches/Worker%20Payment%20Worker%20Name%20Search", [request.term]);
}
let workers = this.parseGenericEntityData.parseData(result);
let output = [];
for (let i = 0; i < workers.length; i++) {
let option = new jQueryAutoCompleteOptions();
option.label = `${workers[i].LastName}, ${workers[i].FirstName} (${workers[i].Employer}) - ${workers[i].ID}`;
option.value = workers[i].ID;
output[i] = option;
}
response(output);
},
select: (event, ui) => {
event.preventDefault();
input.autocomplete("disable");
this.$scope.$evalAsync(() => {
this.$scope.advancedFindModel.selectedWorker = ui.item.label.trim().replace(/[(][0-9]{1,}[)]$/, "").trim();
this.$scope.this.advancedFindModel.selectedWorkerId = ui.item.value;
});
this.$element.find("#advancedSearch").val(this.$scope.advancedFindModel.selectedWorker);
input.autocomplete("enable");
}
});
};
private initEmployerSearch(): void {
let input: any = this.$element.find("#advancedSearch");
input.autocomplete({
delay: 500,
source: (request, response) => {
let result: any;
if (this.isNumber(request.term)) { //search by id
result = this.iMISApiService.AjaxQueryIQA("$/.UNITE_HERE/Membership/Searches/Employer%20Search%20By%20ID", [request.term]);
} else { //search by employer name
result = this.iMISApiService.AjaxQueryIQA("$/.UNITE_HERE/Membership/Searches/Employer%20Search", [request.term]);
}
console.debug(result);
let companies = this.parseGenericEntityData.parseData(result);
let output = [];
for (let i = 0; i < companies.length; i++) {
let option = new jQueryAutoCompleteOptions();
option.label = `${companies[i].Company} (${companies[i].ID})`;
option.value = companies[i].ID;
output[i] = option;
}
response(output);
},
select: (event, ui) => {
console.log("selecting employer");
event.preventDefault();
input.autocomplete("disable");
this.$scope.$evalAsync(() => {
this.$scope.advancedFindModel.selectedEmployer = ui.item.label.trim();
this.$scope.advancedFindModel.selectedEmployerId = ui.item.value;
});
this.$element.find("#advancedSearch").val(this.$scope.advancedFindModel.selectedEmployer);
input.autocomplete("enable");
}
});
};
private isNumber(n): boolean {
return !isNaN(parseFloat(n)) && isFinite(n);
}
}