Typescript Angular 如何将过滤器文本传递给指令

Question

我正在尝试使用指令创建过滤器文本框以供重用，但未能成功传递 filterText。我在这里错过了什么？

TS 指令：

export class FilterTextboxDirective implements ng.IDirective {
    public static CreateDirective: () => any = () => {
        var directive = {
            restrict: "E",
            templateUrl: "ageneralapp/components/views/filtertextbox.html",
            scope: {
                //showFilterTextbox: "=",
                //placeholderText: "=",
                filterText: "=?"
            },
            controller: "FilterTextboxController",
            controllerAs: "vm",
            bindToController: true
        };

        return directive;
    }

    constructor() {
        return FilterTextboxDirective.CreateDirective();
    }
}
getModule().directive("filtertextbox", FilterTextboxDirective.CreateDirective);

}

TS 控制器：

模块ANamespace.Components.Controllers{ "use strict";

export class FilterTextboxController {
    static controllerName: string = "FilterTextboxController";
    displayFilterTextbox: boolean = false;
    placeholderText: string = "";
    filterText: string="";

    activate = (): void => {
        this.placeholderText = this["placeholderText"];
        this.filterText = this["filterText"];
    };

    showFilterTextbox = (): void => {
        this.displayFilterTextbox = true;
    };

    hideFilterTextbox = (): void => {
        this.displayFilterTextbox = false;

    };


    constructor() {
        this.activate();
    }
}
getModule().controller(FilterTextboxController.controllerName, FilterTextboxController);

}

HTML 对于 FilterTextbox：

        <div>
            <span>
                <i ng-click="vm.showFilterTextbox()" class="search"></i>
                <span ng-show="vm.displayFilterTextbox">
                    <input type="text" placeholder="{{vm.placeholderText}}" ng-model="filterText" />
                    <i ng-click="vm.hideFilterTextbox()" class="exit"></i>
                </span>
            </span>
        </div>

HTML 索引：

        <div class="small-6 medium-6 large-6 columns">
            <filtertextbox filterText="filterText"></filtertextbox>
        </div>
       <div ng-repeat="something in vm.primaryData | filter:filterText">
            <div class="row">
                <div class="small-6 medium-6 large-6 columns" valign="top">
                    <span><i class="svg icon large icon-customer"></i></span>
                    <strong><span data-ng-bind="something.fullName"></span></strong>
                </div>
                <div class="small-6 medium-6 large-6 columns" valign="top">
                    <span data-ng-bind="something.zip"></span>
                </div>
            </div>
        </div>

这行不通。有人看到我遗漏了什么吗？任何帮助或指导将不胜感激。

Answer 1

你有：

<filtertextbox filterText="filterText"></filtertextbox>

请将 filterText 移到 vm 例如：

<filtertextbox filterText="vm.filterText"></filtertextbox>

否则它很容易断开连接，例如带有 ng-repeat。

Typescript Angular 如何将过滤器文本传递给指令

Typescript Angular how to pass filter text to directive

directive

filter

angularjs

typescript

更多