2015-05-07 162 views
2

我使用的约曼发电机gulp-angular-generator创建一个角1.3项目中使用的打字稿来定义一饮而尽,角发生器指令。种子项目显示了如何创建控制器,但不是指令。这是我失败的尝试至今:如何使用打字稿

的src /应用/ index.ts

/// <reference path="../../.tmp/typings/tsd.d.ts" /> 
/// <reference path="components/workspace/workspace.controller.ts" /> 
/// <reference path="components/dashboard/dashboard.directive.ts" /> 

module app { 
    'use strict'; 

    angular.module('app', ['ngAnimate', 'ngCookies', 'ngTouch', 'ngSanitize', 'restangular', 'ngRoute', 'ui.bootstrap']) 
    .controller('WorkspaceCtrl', WorkspaceCtrl) 

    .config(function ($routeProvider: ng.route.IRouteProvider) { 
     $routeProvider 
     .when('/', { 
      templateUrl: 'app/components/workspace/workspace.template.html', 
      controller: 'WorkspaceCtrl', 
      controllerAs: 'workspace' 
     }) 
     .otherwise({ 
      redirectTo: '/' 
     }); 
    }); 
} 

的src /应用/组件/工作区/ workspace.controller.ts

module app { 
    'use strict'; 

    export class WorkspaceCtrl { 
    //some code.. 
    } 
} 

SRC /应用/组件/仪表板/ dashboard.directive.ts

module app { 
    'use strict'; 

    angular 
    .module('app') 
    .directive('dashboard',() => { 
     return { 
     restrict: 'E', 
     controllerAs: 'dashboard', 
     bindToController: true, 
     scope: {}, 
     templateUrl: 'app/components/dashboard/dashboard.template.html', 
     controller: DashboardCtrl 
     }; 
    }); 

    class DashboardCtrl { 
    //some code.. 
    } 
} 

当我尝试运行此代码,我得到了浏览器的控制台上看到以下错误(铬):

Uncaught Error: [$injector:nomod] Module 'app' is not available! You either 
misspelled the module name or forgot to load it. If registering a module ensure 
that you specify the dependencies as the second argument. 

检查浏览器的源文件,我意识到,指令文件被索引,其中前装模块定义存在。

我知道我可以用定义控制器的相同方式定义index.ts中的整个指令(如吞吐量发生器所建议的),但这不是一个好主意,因为指令定义对象(DDO)通常很大,一旦你的应用程序开始增长,它将变得更难以维护。

有没有办法在不同的文件中定义的指令并指示发电机加载正确的顺序中的文件?

回答

2

试试这个

module app { 
    'use strict'; 

    export function dashboard(): ng.IDirective { 
    return { 
     restrict: 'E', 
     controllerAs: 'dashboard', 
     bindToController: true, 
     scope: {}, 
     templateUrl: 'app/components/dashboard/dashboard.template.html', 
     controller: DashboardCtrl 
    }; 
    } 
} 

了解更多关于如何在这里打字原稿写指令:http://blog.aaronholmes.net/writing-angularjs-directives-as-typescript-classes/

+0

谢谢链接到文章是非常有用的。 –