Angular Directive 未填充 ui-sref

Posted 2023-03-13

【中文标题】Angular Directive 未填充 ui-sref

【英文标题】：Angular Directive isn't populating ui-sref

【发布时间】：2016-06-07 11:03:39

【问题描述】：

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

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>

【讨论】：

与 attrs 相同，它们是驼峰式属性名称

@charlietfl 是正确的。但是，当使用 attrs['ui-sref'] 时，console.log 仍然显示正确的值，这让我有些不解，这就是为什么我没有在答案中更改它。