AngularJS指令（TypeScript）

Question

我想弄清楚如何在TypeScript中使用AngularJS中的指令。我跟着一個教程，在那裏我相應地跟着每一步......但是我遇到了一些麻煩。由於某種原因，它沒有顯示我的指令的內容。

指令本身：

module Directives { 
    debugger; 
    export interface IMyScope extends ng.IScope 
    { 
     name: string; 
    } 

    export function LeftMenu(): ng.IDirective { 
     return { 
      template: '<div>{{name}}</div>', 
      scope: {}, 
      link: (scope: IMyScope) => { 
       scope.name = 'Aaron'; 
      } 
     }; 
    } 
} 

現在，我把一個調試器來檢查我的代碼甚至可以運行，直到它到達指令，是的是的。我的Chrome正在調試它應該達到的程度。

註冊的所有指令（即使我只有一個大氣壓）：

/// <reference path="../reference.ts" /> 

angular.module('directives', []).directive(Directives) 

我的參考文件：

/// <reference path="../wwwroot/libs/bower_components/definitelytyped/angularjs/angular.d.ts" /> 
/// <reference path="../wwwroot/libs/bower_components/definitelytyped/angularjs/angular-route.d.ts" /> 
/// <reference path="../wwwroot/libs/dx-libs/ts/dx.all.d.ts" /> 

/// <reference path="contollers/controllers.ts" /> 
/// <reference path="directives/directives.ts" /> 
/// <reference path="app.ts" /> 

調用這樣的指令：

<div> 
    <left-menu></left-menu> 
</div> 

有沒有錯誤記錄什麼，所以永遠..所以，我希望有人有這個問題的解決方案。

在此先感謝！

Answer 1

您必須註冊一個名稱爲第一個參數的指令。這是我會怎麼寫你的指令結合打字稿：

export = class LeftMenu implements angular.IDirective { 
    static ID = "leftMenu"; 

    public restrict = "AE"; 
    public template = '<div>{{name}}</div>'; 
    public scope = {}; 
    public link = (scope: IMyScope) => { 
     scope.name = 'Aaron'; 
    } 

    // to show how to handle injectables 
    constructor(private somethingInjected){} 

    static factory() { 
     // to show how to handle injectables 
     var directive = (somethingInjected) => new MyDirective(somethingInjected); 
     directive.$inject = ["somethingInjected"]; 
     return directive; 
    } 
} 

，並進行註冊：

import leftMenu = require("LeftMenu"); 

angular.module('directives', []).directive(leftMenu.ID, leftMenu.factory()); 

Answer 2

調試器的火災，因爲你確實提交對象.directive（打字稿transpiles模塊成對象默認）。

您可以嘗試直接在文件中初始化指令declarating它：

angular 
    .module("module.a") 
    .directive("directive.a",(): angular.IDirective => 
    { 
     return { 
      restrict: "E", 
      templateUrl: "template.a.html", 
      controller: "controller.a", 
      controllerAs: "$ctrl", 
      link:() => {}, 
      bindToController: true 
     }; 
    }); 

或簡單地導出函數

angular 
    .module("module.a") 
    .directive("directive.a", Directives.LeftMenu); 

我不知道的打字稿模塊識別版本的角度函數.directive，該函數註冊模塊的所有指令。