Angular 1.5 component Expression 'undefined' in attribute

Question

I'm trying to use AngularJs 1.5 components but everytime I declare bindings I keep getting this error:

Expression 'undefined' in attribute 'message' used with directive 'homeComp' is non-assignable!

I'm trying a simple component, just to learn it, this is the code:

var component = {
  bindings: {
      message: '='
  },
  controllerAs: 'vm',
  controller: function MainController() {
    this.message = 'Welcome to my component';

    function debug() {
      this.message = 'This message changed';
    }
    this.debug = debug;
  },
  template: [
    'Message: {{ vm.message }}<br />',
    '<button ng-click="vm.debug()">Change message</button>'
  ].join(``)
};

You can see the error here: http://plnkr.co/edit/uutk5kxOVpa5eLfjoa8U?p=preview

What is wrong with the code? Or what is causing this error? If I remove the bindings, the error doesn't appear and I can change the message.

Answer 1

It is not necessary to use the binding option in your component if the property being referenced is only used by the component itself.

By using binding with the = for the message property, you are specifically telling the directive that the parameter is a two way binding, meaning that it will be set in the parent HTML, and that changes to the message property should be written back to the HTML. Because the <home-comp> tag does not have a message property, the HTML is not assignable (cannot be written back to).

There are three ways to fix this error:

1. Enforce the <home-comp message="default message"> requirement and always provide the property in the HTML.
2. Define the binding to be optional, by using message: '=?'. plunkr
3. Remove the message property from the binding completely, if it is not intended to be set from the HTML.

More info from the docs.