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>

Angular Directive不会填充ui-sref

1 个答案: