ディレクティブなしのコントローラにバインドできません 'searchBoxのコントローラ

Question

本質的にinputをラップするディレクティブを作成しようとしています。したがって、私は多くの属性/引数をng-modelのような指示文に渡したいと思います。

しかし、私はそれがすべて動作するのに苦労しています。現時点では、ページに指示文を含めると上記のエラーが発生しています。

interface ISearchBoxDirectiveScope extends angular.IScope { 
    ngModel: string; 
    placeholderText: string; 
} 

class SearchBoxDirectiveController { 

    static $inject = ["$scope"]; 

    constructor(
     private $scope: ISearchBoxDirectiveScope) { 
     console.log("This doesnt get hit", $scope); 
    } 

    public clearSearchTerm() { 
     console.log("here"); 
     this.$scope.ngModel = ""; 
    } 
} 

class SearchBoxDirective implements angular.IDirective { 

    restrict = "E"; 
    replace = true; 
    scope = { 
     ngModel: "=", 
     placeholderText: "@" 
    }; 
    templateUrl = "app/directives/searchBox/searchBox.template.html"; 
    controller: SearchBoxDirectiveController; 
    controllerAs = "$ctrl"; 
    bindToController = true; 

    public link: (scope: ISearchBoxDirectiveScope, element: ng.IAugmentedJQuery, attrs: ng.IAttributes) => void; 

    constructor() { 

     SearchBoxDirective.prototype.link = ($scope: ISearchBoxDirectiveScope, $element: angular.IAugmentedJQuery, attrs: ng.IAttributes) => { 

      console.log("SearchBoxDirective.prototype.link", $scope, attrs); 
     } 
    } 

    static factory(): ng.IDirectiveFactory { 
     const directive =() => new SearchBoxDirective(); 

     directive.$inject = []; 

     return directive; 
    } 
} 

angular 
    .module("app.directives") 
    .directive("searchBox", SearchBoxDirective.factory()); 

とIMそう

<search-box ng-model="$ctrl.rightSideFilter" placeholder-text="Search Vehicles"></search-box> 

Answer 1

私はあなたがコントローラからスコープを継承しているので、あなたは、NG-モデルにアクセスしたいなぜ、rightSideFilterは上のあなたに利用可能であるべきであることを確認していないようにそれを呼び出します範囲。また、あなたは次のことを試すことができます。

interface ISearchBoxDirectiveScope extends angular.IScope { 
    rightSideFilter: string; 
    placeholderText: string; 
} 

と

scope = { 
'rightSideFilter': = '?rightSideFilter', 
///any other 
} 

、それらはあなたが探して値のみであれば、あなたが孤立してディレクティブの作品を作ることができると仮定。

<search-box right-side-filter="$ctrl.rightSideFilter" place-holder-text="Search Vehicles"></search-box> 

へ

export class SearchBoxDirective implements angular.IDirective { 

    restrict = "E"; 
    replace = true; 
    scope = { 
     ngModel: "=", 
     placeholderText: "@" 
    }; 
    templateUrl = "app/directives/searchBox/searchBox.template.html"; 

とあなたのHTML構文