AngularJS typescript 指令

Question

使用 Typescript 创建嵌套指令时遇到问题。我可以在简单的 AngularJs 中做到这一点: http://plnkr.co/edit/UruTqEdMnqNT5wjxcQNC?p=preview ,

但是使用 TypeScript 时它会给我“No controller”错误消息。

/// <reference path="../../Scripts/AngularJs/Typings/angular.d.ts" />

export class directiveA {
    public static $inject: Array<string> = [];
    constructor() {
        var directive: ng.IDirective = {};
        directive.priority = 0; 
        directive.restrict = "A";
        directive.scope = {};
        directive.transclude = true;
        directive.templateUrl = "otherTemplate.html";
        directive.replace = true;
        directive.controller = function ($scope, $element) {
            this.flip = function () {
                $element.toggleClass("flipped");
             }
        }
        directive.replace = true;

        return directive;
    }
} 


export class directiveB{
    public static $inject: Array<string> = [];
    constructor() {
        var directive: ng.IDirective = {};
        directive.require = "^directiveA";
        directive.priority = 1;
        directive.restrict = "A";
        directive.scope = {
            simplrSide : "@"
        };
        directive.transclude = true;
        directive.templateUrl = "templeUrl.html";
        directive.link = function (scope, iElement, iAttrs, simplrEditable) {
            scope.flip = function () {
                simplrEditable.flip();
            }
        }
        directive.replace = true;
        return directive;
    }
}

我不知道它是否相关，但我正在使用 AMD Require.JS 进行脚本加载

Answer 1

假设您将这些注册为:

import mod = require('yourfile')
youmodule.directive('directiveA',mod.directiveA);
youmodule.directive('directiveB',mod.directiveB);

只要您的 html 看起来像这样就可以工作:

<div directiveA>
  <div directiveB>
  </div>
</div>

除此之外还有一些注意事项:

为指令定义使用函数。

这是因为指令(不同于 Controller )在没有 new 运算符的情况下被调用。所以如果你有这样的东西:

class Test{
    foo = "EAC";
    constructor(){
        var directive:any = {}; 
        directive.restrict = this.foo;
    }
} 

它编译为不正确 javascript。由于调用函数 Test 时没有使用 new 运算符，这意味着 this 引用 window 而不是该类的实例。所以无论如何你都不能使用在构造函数之外定义的任何东西。我推荐这样的东西:

function foo():ng.IDirective{
    return {
        restrict: 'EAC';    
    }
}

这样 typescript 将帮助您为 Angular 编写正确的 javascript，而不是指向错误的方式。 我会在某个时候制作一个关于这个的视频

为你的 Controller 使用类指令内的 Controller 也使用 new 运算符调用。与外部 Controller 相同:http://www.youtube.com/watch?v=WdtVn_8K17E再次让 typescript 帮助您了解 Controller 定义中 this 的含义。另外，您可以在子指令中为 Controller 使用 type，例如(用于类型安全和推理):

link: function (scope, iElement, iAttrs, simplrEditable:YourControllerClass)

用于注入(inject)指令函数我仍然使用 $inject。我有以下接口(interface)定义:

interface Function{
    $inject:string[]
}

这意味着你可以这样做:

foo.$inject = ['$compile']; // e.g