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它永远不会undefined在contactList组件中.console.log(this.onRemove)总是打印:function(locals) { return parentGet(scope, locals); }

当然我可以使用另一种showRemove: '@'绑定,但这对我来说看起来并不干净.

---

你有任何想法或更好的解决方案来完成任务吗？

Answer 1

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

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

使用&绑定角度将包装函数,以便保持对$scope传递方法的原始引用,即使未定义.