Question

AngularJS 处理模型中缺少的属性

2014-03-07

178

angularjs

假设我的模型有一些 info 字段，并且此信息可能具有“prop”属性。

我正在渲染一个 div，并希望它具有一个具有该属性值的属性。

使用 <div attr="{{info.prop}}"></div> 非常简单。

但是，如果 info 没有 prop 或它的值为空，则会呈现 <div attr></div>

如何防止将 attr 添加到 div？

更一般地说，我如何检查模型并仅在某些条件适用时添加属性？

我想我可以让模型在范围内包含一个特殊函数并使用 <div {{attrGetter()}}"></div> 或 <div {{attrGetter(info.prop)}}"></div> 并在控制器中包含此逻辑。但我想知道是否有更好/其他方法可以做到这一点。

Answer 1

在这里我将使用一个指令，在 link 函数中您可以访问元素属性：

.directive("myDirective", function() {
    return {
        restrict: "A",
        link: function(scope, elem, attrs) {
            if (scope.info.hasOwnProperty("prop"))
                attrs["attr"] = scope.info.prop
        }
    }
});

然后将这个指令放到您的目标元素上：

<div my-directive></div>