Question

在Angular中，我一直这样做：

<div ng-controller="myCtrl">
    <input type"text" ng-model="model.name">
</div>

我知道ng-controller和ng-model是Angular指令。我也知道我可以制作自己的指令并像这样使用它们（其中包括）：

<div photo photo-caption="caption"></div>
<photo caption="caption" src="image.jpg"></div>

现在很棒。但是有可能做这样的事情：

<photo="Tom's Cat" src="cat.jpg"></photo>

非常感谢任何见解。谢谢！

Answer 1

不，您不能让标签名称具有值。只有属性才能有值。

我不确定这是你所追求的，但是一些内置指令支持两种形式：属性（A）和元素（E）。

E.g。 ngSwitch可以采用两种形式：

属性：<ANY ng-switch="expression" ...>
元素：<ng-switch on="expression" ...>

因此，需要评估的expression在ngSwitch属性（如果存在）或on属性（如果ngSwitch是用作自定义标签。）

在指令的link函数中，实现如下：

link: function (scope, elem, attrs) {
    var watchExpr = attrs.ngSwitch || attrs.on;
    ...

因此，它首先查找名为ngSwitch的属性（规范化名称），如果找不到（或为空），则会查找名为on的属性。

如果您希望photo指令支持不同的表单，则可以实现类似的功能：

属性：<div photo="My cool photo" src="..."></div>或
元素：<photo caption="My cool photo" src="..."></photo>

e.g：

.directive('photo', function () {
    return {
        restrict: 'AE',
        ...
        link: function photoPostLink(scope, elem, attrs) {
            scope.caption = attrs.photo || attrs.caption;
            ...
        }
    };
});

将参数传递给HTML中的指令名称作为属性

1 个答案: