使用TypeScript類編寫Angular指令

我可能只是試圖將太多「新到我」的概念同時組合起來，但我正嘗試使用TypeScript類編寫自定義Angular指令。目前，我並沒有試圖做任何非常有用的事情，只是一個POC。使用TypeScript類編寫Angular指令

我有一個打字稿文件看起來像這樣：

module App { 
    'use strict'; 

    export class appStepper { 

     public link:(scope:angular.IScope, element: angular.IAugmentedJQuery, attrs: angular.IAttributes) => void; 
     public template:string = '<div>0</div><button>-</button><button>+</button>'; 
     public scope = {}; 
     public restrict:string = 'EA'; 

     constructor(){ } 

     public static Factory(){ 
      var directive =() => 
      { return new appStepper(); }; 
      return directive; 
     } 
    } 

    angular.module('app').directive('appStepper', App.appStepper.Factory()); 
}

它編譯成這個在JavaScript：

(function(App) { 
    'use strict'; 
    var appStepper = (function() { 
     function appStepper() { 
      this.template = '<div>0</div><button>-</button><button>+</button>'; 
      this.scope = {}; 
      this.restrict = 'EA'; 
     } 
     appStepper.Factory = function() { 
      var directive = function() { 
       return new appStepper(); 
      }; 
      return directive; 
     }; 
     return appStepper; 
    })(); 
    App.appStepper = appStepper; 
    angular.module('app').directive('appStepper', App.appStepper.Factory()); 
})(App || (App = {}));

我的角度模塊的樣子（我甚至不知道我是否需要要做到這一點）：

angular.module('app',['appStepper'])

我試圖在我看來，使用它：

<div app-stepper></div>

而得到這些錯誤：

Uncaught Error: [$injector:nomod] 
Uncaught Error: [$injector:modulerr]

爲什麼我app知道我的指令？

來源

2015-06-05 amlyhamm

它應該是'angular.module（'app'，[]）''。 – dfsq

很高興知道！但它仍然讓我面臨同樣的問題。 – amlyhamm

檢查此，與詳細的解釋和工作plunker http://stackoverflow.com/a/30506888/1679310 –

雖然這是不太相同的問題，這個答案包括什麼，我試圖做的一個例子：How can I define my controller using TypeScript?

我跟着Plnkr它引用的例子，發現成功：http://plnkr.co/edit/3XORgParE2v9d0OVg515?p=preview

我最終的TypeScript指令看起來像：

module App { 
    'use strict'; 

    export class appStepper implements angular.IDirective { 

     public link:(scope:angular.IScope, element: angular.IAugmentedJQuery, attrs: angular.IAttributes) => void; 
     public template:string = '<div>0</div><button>-</button><button>+</button>'; 
     public scope = {}; 
     public restrict:string = 'EA'; 

     constructor(){ } 

    } 

    angular.module('app').directive('appStepper', [() => new App.appStepper()]); 
}

來源

2015-06-05 19:06:13 amlyhamm

使用TypeScript類編寫Angular指令

回答

相關問題