角指令没有填充ui-sref

Question

这是我的指令，用于实现我的主菜单项：

export class MainMenuItemDirective {
    templateUrl = "ui/Directives/MainMenuItem.html";
    scope = {};

    link: angular.IDirectiveLinkFn = (scope: ng.IScope, element: ng.IAugmentedJQuery, attrs: ng.IAttributes) => {
        scope["icon"] = attrs["icon"];
        scope["title"] = attrs["title"];
        scope["ui-sref"] = attrs["ui-sref"];

        console.log(scope);
    };

    static factory(): any {
        var directive = () => {
            return new MainMenuItemDirective();
        };

        return directive;
    }
}

模板的内容如下：

<li>
    <a ui-sref="{{ ui-sref }}" class="button expand radius">
        <span class="fa {{ icon }}"></span>
        <br />
        {{ title }}
    </a>
</li>

使用方式如下：

<main-menu-item 
    title="Templates" 
    icon="fa-book" 
    ui-sref="configuration-templates">
</main-menu-item>

log语句的输出包含所有三个值：

icon: "fa-book"
title: "Templates"
ui-sref: "configuration-templates"

它被呈现为：

<li>
    <a ui-sref="0" class="button expand radius ng-binding">
        <span class="fa fa-book"></span>
        <br>
        Templates
    </a>
</li>

注意ui-sref="0"。应该是ui-sref="configuration-templates"。

问题：为什么我的ui-sref没有正确地填充？其他值正在正确设置。

Answer 1

我认为问题在于，您正在尝试访问一个具有连字符名称的属性ui-sref。试着用骆驼箱来做ui-sref。

指令：

link: angular.IDirectiveLinkFn = (scope: ng.IScope, element: ng.IAugmentedJQuery, attrs: ng.IAttributes) => {
    scope["icon"] = attrs["icon"];
    scope["title"] = attrs["title"];
    scope["uiSref"] = attrs["ui-sref"];

    console.log(scope);
};

模板：

<li>
    <a ui-sref="{{ uiSref }}" class="button expand radius">
        <span class="fa {{ icon }}"></span>
        <br />
        {{ title }}
    </a>
</li>