angularjs - Angular 指令使用 Typescript 接收对象作为属性

Question

我正在使用 Angular 1.5.8 和 Typescript 进行开发我有一个指令在另一个指令(当然还有另一个 Controller )的范围内使用。假设指令 1、 Controller 1 和指令 2、 Controller 2。鉴于Controller1已经有了用户信息，我想通过Directive2将这个用户信息传递给Controller2，防止后台再次获取信息。我不确定这是否可以完成，但如果是这样就太好了:)

下面是帮助我解释的代码:

指令 1 HTML:

<div>
    ...
    <directive2 user="{{ctrl.loggedUser}}"></directive2>
    ...
</div>

loggedUser 通过调用后端加载到 Controller1 构造函数中。

Directive2 和 Directive2Ctrl Typescript 代码:

class Directive2 implements ng.IDirective {
    controller = "Directive2Ctrl";
    controllerAs = "d2Ctrl";
    bindToController = {
        user: "@"
    };
    restrict = "E";
    templateUrl = "directive2.html";

    static factory(): ng.IDirectiveFactory {
        const directive = () => new Directive2();
        return directive;
    }
}
angular
    .module("app")
    .controller("Directive2Ctrl", Directive2Ctrl)
    .directive("directive2", Directive2.factory());


class Directive2Ctrl implements IDirective2Ctrl {
    public user: User;

    constructor(user: User) {
         // user is undefined
    }

    $onInit(user: User): void {
        // user is undefined
    }
}

我找不到将用户对象传递给 Directive2Ctrl 的方法(甚至不确定是否可行)。

Answer 1

使用“scope”属性而不是“bindToController”属性，并将“@”替换为“=”。然后，我为我的特定范围使用一个接口(interface)来获得自动完成功能。

export interface IMyDirectiveScope extends ng.IScope {
    user: any;
}

export class Myirective {
    public restrict: string = 'E';
    public templateUrl = "/mytemplate.html";
    public link: (scope: IMyDirectiveScope, element: ng.IAugmentedJQuery, attrs: ng.IAttributes, ngModel: ng.INgModelController) => void;
    public scope = {
        user: "="
    };

    constructor() {
        var context = this;
        context.link = (scope: IMyDirectiveScope, element: ng.IAugmentedJQuery, attrs: ng.IAttributes, ngModel: ng.INgModelController) => {
           //INSERT YOUR CODE
           //console.log(scope.user);
        };
    }

    public static Factory() {
        var directive = () => {
            return new MyDirective();
        };

        return directive;
    }
}

在您的 html 中，删除花括号。

<div>
    ...
    <directive2 user="ctrl.loggedUser"></directive2>
    ...
</div>