AngularJS Typescript指令

debugcn 发表于 Dev

阿尔吉曼塔斯·克拉索斯卡斯（Algimantas Krasauskas）

使用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进行脚本加载

阿尔吉曼塔斯·克拉索斯卡斯（Algimantas Krasauskas）

该问题与Typescript无关，而与AngularJS指令有关。将templateUrl更改为template并使用内联代码有助于解决错误。这是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;
    }
}