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

我称之为

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

Answer 1

我不确定您为什么要访问ng-model，因为您从控制器继承范围，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>

没有指令'searchBox的控制器

1 个答案: