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

【问题标题】：Typescript Angular how to pass filter text to directiveTypescript Angular如何将过滤器文本传递给指令
【发布时间】：2016-06-06 00:34:35
【问题描述】：

我正在尝试使用指令创建过滤器文本框以供重用，但未能成功传递 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 { “使用严格”；

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

}

FilterTextbox 的 HTML：

        <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>

这不起作用。有人看到我错过了什么吗？任何帮助或指导将不胜感激。

【问题讨论】：

标签： angularjs filter typescript directive

【解决方案1】：

你有：

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

请将filterText 移动到vm 例如：

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

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

https://www.youtube.com/watch?v=WdtVn_8K17E

【讨论】：

如果你有机会试试 React+TSX。你可以戳一下alm.tools的源代码来感受一下

更多