angularjs - Angular 指令未填充 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>

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

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>