AngularJS打字稿指令

Question

使用Typescript创建嵌套指令时遇到问题.我可以用简单的AngularJs来做:http://plnkr.co/edit/UruTqEdMnqNT5wjxcQNC？p = preview ,

但使用TypeScript它给我"无控制器"错误消息.

/// <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>

除此之外的几个笔记:

使用函数作为指令定义.

这是因为没有new运算符就会调用指令(与控制器不同).所以如果你有类似的东西:

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

它编译为不正确的 JavaScript.由于在没有new运算符的情况下调用函数Test,这意味着this引用window而不是类的实例.所以你不能使用构造函数之外定义的任何东西.我建议像:

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

这种方式打字稿将帮助您为角度编写正确的javascript而不是以错误的方式指向您.我会在某个时候制作关于此的视频

使用控制器的类 也可以使用new运算符调用指令内的控制器.与外部控制器相同:http://www.youtube.com/watch？v = WdtVn_8K17E再次让打字稿帮助您this了解控制器定义内部的含义.另外,你可以在子指令中使用控制器的类型(对于类型安全和推理):

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

为了注入指令函数, 我仍然使用$ inject.我有以下接口定义:

interface Function{
    $inject:string[]
}

这意味着您可以:

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

Answer 2

该问题与 Typescript 无关，而是与 AngularJS 指令相关。将templateUrl更改为模板并使用内联代码有助于解决错误。这是 AngularJS 问题，更多信息： https: //github.com/angular/angular.js/issues/1903 希望他们将来能解决这个问题！

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.template = "<div>Your content</div>";
        directive.replace = true;
        directive.controller = function ($scope, $element) {
            this.flip = function () {
               //Some func
             }
        }
        directive.replace = true;

        return directive;
    }
}