无法访问Angular Directive模板函数中的属性实际值

Cannot access attribute real value in Angular Directive template function

本文关键字：属性 函数 访问 Angular Directive      更新时间：2023-09-26

我已经找了一段时间了，找不到任何与此相关的问题，所以我想在这里询问是否有人能帮助我，我们将不胜感激。

我正在为一个标签创建一个指令（我希望数字是动态的，有角度的，没有办法做这样的事情，所以我创建了一个带有模板的指令作为函数，如下所示：

angular.module("myModule").directive("myHeader", ["translateFilter", function (translateFilter) {
    "use strict";
    return {
        restrict: "E",
        scope: true,
        template: function(element, attrs) {
            var html = "", title = translateFilter(attrs.title);
            console.log(attrs); //Here i can see that attrs.size is "3"
            console.log(attrs.size); // I get {{hsize}} instead
            html += "<h" + attrs.size + ">";
                html += "<a href=" + attrs.url + " title=" + title + ">";
                    html += "<i class='fa fa-" + attrs.icon + "'></i>";
                    html += title;
                html += "</a>";
            html += "</h" + attrs.size + ">";
            return html;
        }
    };
}]);

我在另一个指令中使用这个指令，如下所示：

<my-header url="{{url}}" icon="{{icon}}" title="{{title}}" size="{{hsize}}"></my-header>

其中｛｛hsize｝｝是"3"。

任何人都可以指出，为什么当我做console.log(attrs.size);时，我会得到｛｛hsize｝｝，而当我做了console.log(attrs);时，我可以清楚地看到它的值是"3"？

在我的指令中，我已经尝试了scope属性的所有可能组合。

这很正常，因为｛｛hsize｝｝它不是AngularJS"插值"的。您可以在控制台中看到3（当console.log（attrs）时），因为在此期间Angular"插值"数据。请尝试在您的模板函数中写入以下内容：

attrs.$observe('size', function(value){
     console.log(value);
});

但是，如果可以的话。在模板函数中这样做不是很好。链接函数和编译函数用于修改模板。

查看这些功能的文档：https://docs.angularjs.org/api/ng/service/$compile

有关数据"插值"的更多信息，请参阅：https://gist.github.com/CMCDragonkai/6282750

相关文章：