Question

我一直在寻找一个时间，但是找不到与此相关的任何问题/问题，所以我会在这里询问是否有人可以帮助我，我将不胜感激。

我正在为一个标签创建一个指令（我希望这个数字是动态的，并且有角度没有办法做类似的事情我已经创建了一个模板指令作为函数如下：

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}}是＆＃34; 3＆＃34;。

任何人都可以指出我为什么在console.log(attrs.size);时获得{{hsize}}，但当我console.log(attrs);时，我可以清楚地看到它的值是"3"？

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

Answer 1

这是正常的，因为{{hsize}}不是＆＃34;插入＆＃34;由AngularJS提供。您可以在控制台中看到3（当console.log（attrs）时），因为在此期间Angular＆＃34; interpolate＆＃34;数据。如需查看，请尝试在模板函数中编写：

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

但是，如果可以的话。在模板函数中执行此操作并不是很好。链接函数和编译函数用于修改模板。

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

有关数据＆＃34;插值＆＃34;的更多信息，请查看：https://gist.github.com/CMCDragonkai/6282750

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

1 个答案: