如何使用AngularJS和TypeScript为指令创建隔离范围?

时间:2017-08-08 19:04:20

标签: javascript angularjs typescript angularjs-directive

我刚刚开始使用AngularJS documentation编写指令,以及我所说的一些例子。我正在尝试使用属性将值传递给我的指令,但它不起作用。大多数困难是尝试使用TypeScript语法正确编写。

索引应该根据传递给它的客户变量显示文本“Agatha”,但由于某种原因它没有出现。

这是我的简化代码:

的index.html

<div>
    <user-display customer="agatha"></user-display>
</div>

用户-display.directive.html

<div>
    <b>Name:</b> {{customer.name}}
</div>

指定-users.directive.ts

import { Main } from "../../main";
import * as angular from "angular";

export class UserDisplayDirective implements ng.IDirective {

    static $inject = [];
    restrict = "E";
    template = require("./user-display.directive.html");

    scope = {
        value: '=',
        customer: '='
    };

    constructor() { }

    link($scope: ng.IScope, element: ng.IAugmentedJQuery, attributes: any) {
        $scope.agatha = {name: "Agatha"};
        $scope.ida = {name: "Ida"};
    }
}

class DirectiveFactory {
    public static GetFactoryFor<T extends ng.IDirective>(classType: Function): ng.IDirectiveFactory {
        let factory = (args: any[]): T => {
            let directive = <any>classType;
            return new directive(args);
        };
        factory.$inject = classType.$inject;
        return factory;
    }
}

Main.module.directive("userDisplay", DirectiveFactory.GetFactoryFor<UserDisplayDirective>(UserDisplayDirective));

非常感谢任何帮助。谢谢!

0 个答案:

没有答案