Angular 1.5 组件绑定：检查回调是否存在

Question

我有一个简单的 contactList 组件，它有 2 个绑定：contacts 和 onRemove。

contacts只是要显示的联系人数组
onRemove是回调函数

app
  .component('contactList', {
    template: 
      `<div ng-repeat="c in $ctrl.contacts">
         {{c.name}}
         <div ng-click="$ctrl.onRemove({contact: c})">Remove</div>
       </div>`,
    bindings: {
      contacts: '<',
      onRemove: '&'
    },
    controller: function() {}
  })

我在我的应用程序中多次使用这个组件。 onRemove 回调的行为可能会有所不同，具体取决于 在何处 使用了 contactList 组件。示例：

contactMainView（= 组件）使用 contactList 组件显示搜索栏和结果联系人列表。 onRemove 将从数据库中删除联系人。
groupMembersView 使用 contactList 组件显示属于给定组的所有联系人。 虽然onRemove不会被设置，但这里应该无法删除联系人。

想法：

首先我想，我可以使用 ng-if="$ctrl.onRemove"，但这不起作用，因为 onRemove 在 contactList 组件中永远不会是 undefined。 console.log(this.onRemove) 总是打印：function(locals) { return parentGet(scope, locals); }

当然，我可以使用另一个 showRemove: '@' 绑定，但对我来说这看起来 DRY。

您有什么想法或更好的解决方案来完成任务吗？

Answer 1

最简单的方法是检查属性是否已定义。在你的控制器中注入 $attrs 然后你可以这样做：

if( $attrs.onRemove ) { //Do something }

使用 & 绑定 angular 将包装函数以保留对传递方法的原始 $scope 的引用，即使未定义也是如此。

Answer 2

在组件上执行 onRemove 函数允许获取函数是否传入参数。所以你可以使用 ng-if="$ctrl.onRemove()"

component('contactList', {
template: 
  `<div ng-repeat="c in $ctrl.contacts">
     {{c.name}}
     <div ng-click="$ctrl.onRemove()({contact: c})" ng-if="$ctrl.onRemove()">Remove</div>
   </div>`,
bindings: {
  contacts: '<',
  onRemove: '&'
},
controller: function() {
  console.log(this.onRemove);
  console.log(this.onRemove());
}
})

Answer 3

另一种选择是通过在绑定定义中添加问号来将回调定义为可选的： onRemove: '&?'

文档中的文本：All 4 kinds of bindings (@, =, <, and &) can be made optional by adding ? to the expression. The marker must come after the mode and before the attribute name. See the Invalid Isolate Scope Definition error for definition examples.

Angular 1.5 组件绑定：检查回调是否存在

Angular 1.5 Component Bindings: Check if Callback is Present

angularjs

angularjs-directive

angularjs-bindings

angularjs-components

想法：