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

Question

我一直在找时间，找不到任何与此相关的 question/issue，所以我想在这里问一下，如果有人可以帮助我，我们将不胜感激。

我正在为标签创建一个指令（我希望数字是动态的并且 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); 时我可以清楚地看到它的值是 "3"？

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

Answer 1

这很正常，因为 {{hsize}} 它不是 AngularJS 的 "interpolate"。您可以在控制台中看到 3（当 console.log(attrs) 时），因为同时有 Angular "interpolate" 数据。看看，试着在你的模板函数中写这个：

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

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

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

有关数据 "interpolation" 的更多信息，请查看：https://gist.github.com/CMCDragonkai/6282750

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

Cannot access attribute real value in Angular Directive template function

javascript

angularjs

angularjs-directive