Angular 指令 - 第三个参数始终为零

Question

我正在用等效的 Angular 指令替换 MVC HtmlHelper。助手根据几个参数呈现 Font Awesome 图标。这在一定程度上起作用，但是第三个参数始终为零。

标记：

<subscription-product-icon productid="p.ProductID" productname="p.ProductName" additionalclass="fa-lg"></subscription-product-icon>

指令：

    (function () {
    'use strict';

    angular.module('app', [])
        .directive('subscriptionProductIcon', function () {

            var getTemplate = function (productid, productname, additionalclass) {
                var iconClass = additionalclass;
                debugger
                switch (productid) {
                    case 1:
                        iconClass += " fa-circle-o-notch free-subscription";
                        break;
                    case 2:
                        iconClass += " fa-circle-o-notch standard-subscription";
                        break;
                    case 3:
                        iconClass += " fa-calendar live-availability";
                        break;
                    default:
                        iconClass += " fa-question text-red";
                        break;
                }

                return "<i class='fa " + iconClass + "' title='" + productname + "' aria-hidden='True'></i>";
            };

            return {
                restrict: "E",
                scope: {
                    productid: "=",
                    productname: "=",
                    additionalclass: "="
                },
                link: function (scope, element, attrs) {
                    element.html(getTemplate(scope.productid, scope.productname, scope.additionalclass));
                    console.log("test", scope.productid);
                }
            };

        });
})();

虽然前两个参数工作正常，但第三个参数

additionalclass

始终为零。谁能解释一下为什么？

这是我的第一个 Angular 指令，在使用 Angular 的第一天顺便说一句，所以我不是专家！

Answer 1

这里的问题是您在指令中将 additionalClass attr 定义为双向绑定 "=" 然后您试图将常量字符串而不是变量传递给它。

修复-

将 "=" 更改为 "@" 以获得附加类属性
传递一个变量给additionalClass attr 和其他两个一样

检查此 plunker 以查看它的实际效果

希望对您有所帮助

Angular 指令 - 第三个参数始终为零

Angular directive - third parameter is always zero

angularjs

angularjs-directive