無法綁定到控制器沒有指示'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 
} 

，並假設，如果這些是你找那麼你可以讓指令工作孤立的唯一值。

export class SearchBoxDirective implements angular.IDirective { 

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

和你的HTML語法

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