自定义指令中的 Angular 调用 NGIF

Question

我希望在我自己的指令中使用 NGIF 作为一种包装器。

我发现以下示例运行良好...

var NAME = 'yourCustomIf';

angular.module('myApp', [])
.directive(NAME, function (ngIfDirective) {
    console.log(ngIfDirective)

    var ngIf = ngIfDirective[0];

    return {
        transclude: ngIf.transclude,
        priority: ngIf.priority,
        terminal: ngIf.terminal,
        restrict: ngIf.restrict,
        link: function ($scope, $element, $attr) {
            var value = $attr[NAME];
            var yourCustomValue = $scope.$eval(value);

            $attr.ngIf = function () {
                return yourCustomValue;
            };


            ngIf.link.apply(ngIf, arguments);
        }
    };

});

问题是我不知道如何将其转换为打字稿。这是我到目前为止所拥有的......

export class MyCustomDirective implements ng.IDirective {

    constructor(private ngIfDirective: ng.IDirective) {

    }

    transclude = this.ngIfDirective.transclude;
    priority = this.ngIfDirective.priority;
    terminal = this.ngIfDirective.terminal;
    restrict = this.ngIfDirective.restrict;

    link = (scope: ng.IScope, element: ng.IAugmentedJQuery, attrs: ng.IAttributes, ctrl: any) => {

        var atrribute = attrs["custom"];

        var value = scope.$eval(atrribute);

        attrs["ngIf"] = () => {
            return value;
        };


    }

}

我的问题是最后一行ngIf.link.apply(ngIf, arguments);。这里没有 apply 方法。

Answer 1

我不推荐扩展指令。没有一个好的方法可以做到这一点，每个指令处理模板、嵌入和范围的方式会有所不同，并且不太可能网格化。

如果你想包装一个指令，我建议使用嵌入并正常使用该指令。

module.directive('specialIf', function (myService) {
    return {
        transclude: true,
        scope: {},
        template: '<ng-transclude ng-if="isShown"></ng-transclude>'
        link: function (scope, element, attr) {
            scope.isShown = myService.isShown();
        }
    };

});

您的用法将如下所示：

<special-if>
    <div>Stuff I may or may not want showing up</div>
</special-if>