Angular TypeScript Directive 的 Link 方法不会被调用答案

【问题标题】：Angular TypeScript Directive's Link method doesn't get calledAngular TypeScript Directive 的 Link 方法不会被调用
【发布时间】：2017-08-26 01:37:26
【问题描述】：

我正在尝试实现一个基于角色的访问控制系统，其中允许的资源将在登录后从服务器加载。我可以设法使用原始 JavaScript 代码对其进行检查。

angular.module('app').directive('accessControl',
[
    'AuthService', function (authService) {
        return {
            restrict: 'A',
            scope: "=",
            link: function (scope, element, attrs) {
                scope.canShow = function(resource) {
                    var allowedResources = authService.accountInfo.resources;
                    return allowedResources.indexOf(resource) !== -1;
                }

            }
        }
    }
]);

但由于我的整个应用程序都在 TypeScript 中，我一直在尝试用纯 TypeScript 来制作指令，但不幸的是我无法这样做。这是我的 TS 代码。

export class AccessControl implements ng.IDirective {

    public authService: App.AuthService;
    public link: (scope: ng.IScope, element: ng.IAugmentedJQuery, attrs: ng.IAttributes) => void;

    constructor(authService: App.AuthService) {
        this.authService = authService;
        console.log('authservice: ', authService);
        AccessControl.prototype.link = (scope: ng.IScope, element: ng.IAugmentedJQuery, attrs: ng.IAttributes) => {
            scope["canShow"] = function (resource: string) {
                // some logic
                console.log('can show' + resource);
                return true;
            };
        };
    }

    public static factory(): ng.IDirectiveFactory  {
        var directive = (authService: App.AuthService) => {
            return new AccessControl(authService);
        };

        directive['$inject'] = ['AuthService'];
        return directive;
    }

    restrict = "A";
    scope: "=";
}

angular.module('app').directive('accessControl', AccessControl.factory());

链接函数永远不会被调用。任何帮助或指针将不胜感激。

【问题讨论】：

标签： javascript angularjs typescript angularjs-directive

【解决方案1】：

我们一直将link 声明为类的公共函数。除非您使用隔离作用域（在这种情况下，它将是每个作用域变量或方法专门传递的对象），否则您不需要在指令类上使用公共 scope 变量。此外，您可以直接在directive 上设置$inject，而无需使用括号属性表示法。以下是我们使用 TypeScript 创建指令的方式：

namespace app.directives {
    export class AccessControl implements ng.IDirective {

        public restrict = "A";

        constructor(private authService: App.AuthService) {
            console.log("authservice: ", this.authService);
        }

        public link(scope: ng.IScope, 
                    element: ng.IAugmentedJQuery, 
                    attrs: ng.IAttributes) {
            console.log("in link function of directive", scope);
        }

        public static factory(): ng.IDirectiveFactory  {
            var directive = (authService: App.AuthService) => {
                return new AccessControl(authService);
            };

            directive.$inject = ["AuthService"];
            return directive;
        }
    }

    angular.module("app")
        .directive("accessControl", AccessControl.factory());
}

【讨论】：