Angular TypeScript指令的链接方法不会被调用

我试图实现一个基于角色的访问控制系统，其中允许的资源将在登录后从服务器加载。我可以设法使用原始JavaScript代码进行检查。Angular TypeScript指令的链接方法不会被调用

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; 
       } 

      } 
     } 
    } 
]);

但因为我的整个应用程序是打字稿，我一直在努力使纯打字稿的指令，但不幸的是，我不能这样做。这是我的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());

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

来源

2017-03-31 Foyzul Karim

我们一直宣称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()); 
}

来源

2017-04-01 03:50:52 Lex

Angular TypeScript指令的链接方法不会被调用

回答

相关问题