Angular 1.5 Component Bindings: Check if Callback is Present

Issue

I've got a simple contactList component, which has 2 bindings: contacts and onRemove.

• contacts is just an array of contacts to display
• onRemove is a callback function

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() {}
  })

I use this component multiple times within my app. And the onRemove callback can behave differently, depending on where the contactList component is getting used. Example:

• contactMainView (= component) displays a search bar and the resulting list of contacts using the contactList component. onRemove will delete the contact from the database.

• groupMembersView displays all contacts belonging to the given group using the contactList component. Here it shouldn't be possible to remove a contact, though onRemove will not be set.

---

Ideas:

First I thought, that I could use an ng-if="$ctrl.onRemove" but that doesn't work, because onRemove is never undefined within contactList component. console.log(this.onRemove) always prints: function(locals) { return parentGet(scope, locals); }

Of course I could use another showRemove: '@' binding, but that doesn't look DRY to me.

---

Do you have any idea or some better solution to get things done?

Solution

The simplest way would to check if the attribute is defined. In your controller inject $attrs and then you can do:

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

Using the & binding angular will wrap the function in order to keep references to the original $scope of the passed method, even if is not defined.

Answered By - Sebastian Sebald