Question

我有一个模板，看起来像：

scope:{
  localClickFunc: "&click",
  myLocalDbClickFunc: "&dblclick"
} ...

 <myButton  ng-click="localClickFunc($event)" ng-doubleckick="myLocalDbClickFunc($event)"/>

还有很多其他事件（鼠标悬停等）

我的localClickFunc在带有控制器功能的scope指令中被绑定（对于我的情况，它们可以用“=”绑定，这没关系。）

问题在于，在使用这个'myButton'指令时，并非所有属性都是必需的。如果我使用它，所有其他事件将被注册并通过角度触发到noop函数。

我可以在屏幕上显示多达1000个按钮。这可能是什么解决方案？有条件模板吗？

Answer 1

范围绑定定义中的?使该属性成为可选。

然而，就Angular而言，函数绑定（&）始终是可选的。即如果你没有在这个绑定中指定一个函数，Angular不会抱怨它会将一个函数放在指令的范围内。所以你不能写if( scope.localClickFunc == null )来检查它的存在。

我建议使用可选绑定=?来指定回调。通过这种方式，您将能够检查绑定是否存在的范围，并且只有在存在时才将其绑定到实际的DOM事件。示例代码：

scope:{
    localClickFunc: "=?click",
    localDbClickFunc: "=?dblclick"
},
link: function(scope, element, attrs) {
    ...
    if( scope.localClickFunc != null ) {
        element.on("click", scope.localClickFunc);
    }
    ...
}

然后将指令用作：

<myButton click="localClickFunc($event)"
          dblclick="myLocalDbClickFunc($event)"
/>

您可以指定任何或所有属性，并相应地安装处理程序。

Answer 2

你可以发送attr就像指令名称是mydir然后在链接和编译函数中的第三个参数之一通常是名称为params而你通过params.mydir到达那里（值将是ovidiu）。您可以发送任何基于文本的内容，例如';'像“click; dbclick; onmouseout”一样分离，并使用params.mydir.split（';'）在指令中分解它。从那里你甚至可以去像“allClicks”这样的活动组，你只需要在链接中添加一些附加正确内容的字典或开关。

Angular js指令动态模板绑定

2 个答案: