angularjs - Angular 1.5 组件绑定(bind) : Check if Callback is Present

Question

我有一个简单的 contactList组件，有 2 个绑定(bind):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绝不是 undefined在 contactList 内零件。 console.log(this.onRemove)总是打印: function(locals) { return parentGet(scope, locals); }
当然我可以使用另一个 showRemove: '@'绑定(bind)，但这对我来说并不干燥。

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

Answer 1

最简单的方法是检查属性是否已定义。在您的 Controller 中注入(inject) $attrs然后你可以这样做:

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

使用 & binding angular 将包装函数以保留对原始 $scope 的引用传递的方法，即使没有定义。