Typcript Угловая как передать текст фильтра директиве

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 { "использовать строгий";

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-повторением.

Больше

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