带有控制器构造函数的AngularJS指令永不触发

时间:2018-06-22 16:41:17

标签: angularjs typescript angularjs-directive angularjs-controller

嗨,我正在尝试在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);
    }
}

0 个答案:

没有答案