templates - Angular js 指令动态模板绑定(bind)

Question

我有一个如下所示的模板:

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

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

还有许多其他事件(鼠标悬停等)

我的 localClickFunc 与 Controller 函数绑定(bind)在范围指令中(对于我的情况，它们可以与“=”绑定(bind)，这并不重要)。

问题是，在使用此“myButton”指令时，并非所有属性都是必需的。如果我将它与所有其他事件一起使用，则将通过 Angular 向 noop 函数注册并触发。

我的屏幕上可以有多达 1000 个按钮。解决这个问题的方法是什么？有条件模板吗？

Answer 1

作用域绑定(bind)定义中的 ? 使该属性成为可选属性。

但是，就 Angular 而言，函数绑定(bind) (&) 始终是可选的。 IE。如果您没有在此绑定(bind)中指定函数，Angular 不会提示，并且无论如何它都会将函数放入指令的范围内。因此，您不能编写 if(scope.localClickFunc == null ) 来检查其是否存在。

我建议使用可选绑定(bind) =? 来指定回调。通过这种方式，您将能够检查绑定(bind)是否存在的范围，并且仅当它存在时，才将其绑定(bind)到实际的 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)"
/>

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