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

Question

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

我正在为标签创建一个指令(我希望数字是动态的，并且有 Angular ，因此无法执行类似的操作，因此我使用模板作为函数创建了一个指令，如下所示:

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); 时，我会得到 {{hsize}} 我可以清楚地看到它的值为“3”？

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

Answer 1

这是正常的，因为 {{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