angularjs - Angular 指令没有填充 ui-sref

这是我执行主菜单项的指令：

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>

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

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 没有正确填充？其他值都设置正确了。

答案＃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>