angularjs - Angular 指令检查是否在隔离范围内设置了可选绑定(bind)

Question

我正在编写一个 Angular 指令来包装一些自定义下拉列表的逻辑。我的指令有 3 个下拉菜单，实际上可以使用任意数量的下拉菜单。

我的指令(精简)如下所示:

app.directive('dropdowns',
    ['$http', '$filter', ...
    function($http, $filter, ...) {
        return {
            restrict: 'E',
            templateUrl: '/Some_template',
            scope: {
                customer: '=?',
                warehouse: '=?',
                location: '=?',
            link: function (scope, elm, attrs) { 

                //How do I tell if scope.customer is set to a binding?
            }
        }
    }]);

如何检查下拉绑定(bind)是否实际上绑定(bind)到其他变量？需要明确的是，我无法检查变量是否为真，因为未定义的值很好。例如，如果我的 HTML 如下所示:

<dropdowns customer="customer" warehouse="warehouse"></dropdowns>

如何判断客户和仓库已设置，但位置尚未设置？最终我使用该信息来显示/隐藏相关的下拉菜单。我宁愿只检查这些绑定(bind)，而不是向我的隔离范围添加另外一些绑定(bind)。

Answer 1

您可以使用 attrs 参数来实现这一点。 attrs 参数将向您显示元素所有属性的原始值(双花括号除外，将首先解析其值)。

//create the dropdowns if the attribute was present
if(attrs.customer){ /* create the dropdown */}
if(attrs.warehouse){ /* create the dropdown */}
if(attrs.location){ /* create the dropdown */}

这是一个显示差异的 jsfiddle。

https://jsfiddle.net/L2j4ecd8/