javascript - 将属性从父级复制到 Angular Directive(指令)中的内部控件

Question

我想做一个 Angular Directive(指令)，比如说 <my-directive/> .该指令应该是这样的:

<div>
    <input />
    <button></button>
</div>

我想将我添加到指令中的属性复制到内部 input元素。所以说如果我写

<my-directive ng-model="ctrl.some" 
              pattern="/.../" 
              placeholder="some placeholder for input" 
              required />

这些属性应该被复制到我的指令中的输入。我能以好的方式实现这一目标吗？还是我应该以其他方式发出指令？

Answer 1

首先，如果您要创建自己的指令，我猜您不会按原样使用 ng-model 和其他名称。

现在，假设我们创建一个新指令 my-directive

在指令定义中，我们可以将这些属性分配给指令 scope 上的变量，因此它们对内部控件可见。

类似这样的东西

return {
    scope:{
        model:'=',
        myplaceholder:'='
    },
    link : //process the scope variables here, as required
    ...

    template:'<input ng-model="model" placeholder="{{myplaceholder}}"/> ... '

}

类似这样的东西(不是确切的代码)，它应该可以工作。

用作:

<my-directive model="someScopeVar" myplaceholder="someOtherScopeVar">
</my-directive>

请注意 template 中 myplaceholder 周围的 {{ }}，这是因为 placeholder 属性需要一个插值字符串而不是变量。