小编Mil*_*kov的帖子

使用TypeScript和$ inject机制定义AngularJS指令

最近我开始重构我正在使用TypeScript进行的一个Angular项目.使用TypeScript类来定义控制器非常方便,并且由于static $inject Array<string>属性而适用于缩小的JavaScript文件.并且您可以获得非常干净的代码,而无需从类定义中拆分Angular依赖项:

 module app {
  'use strict';
  export class AppCtrl {
    static $inject: Array < string > = ['$scope'];
    constructor(private $scope) {
      ...
    }
  }

  angular.module('myApp', [])
    .controller('AppCtrl', AppCtrl);
}
Run Code Online (Sandbox Code Playgroud)

现在我正在寻找解决方案来处理指令定义的类似情况.我找到了一个很好的做法,将指令定义为函数:

module directives {

  export function myDirective(toaster): ng.IDirective {
    return {
      restrict: 'A',
      require: ['ngModel'],
      templateUrl: 'myDirective.html',
      replace: true,
      link: (scope: ng.IScope, element: ng.IAugmentedJQuery, attrs: ng.IAttributes, ctrls) => 
        //use of $location service
        ...
      }
    };
  }


  angular.module('directives', [])
    .directive('myDirective', ['toaster', myDirective]);
}
Run Code Online (Sandbox Code Playgroud)

在这种情况下,我被迫在指令定义中定义Angular依赖项,如果定义和TypeScript类在不同的文件中,则可能非常容易出错.使用typescript和$inject机制定义指令的最佳方法是什么,我正在寻找一种实现TypeScript IDirectiveFactory接口的好方法,但我对我找到的解决方案并不满意.

directive inject angularjs typescript

45
推荐指数
3
解决办法
5万
查看次数

标签 统计

angularjs ×1

directive ×1

inject ×1

typescript ×1