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.

Claies · Accepted Answer · 2016-05-14 16:31:46Z

5

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:

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

More info from the docs.

edited May 14, 2016 at 16:31

answered May 14, 2016 at 16:26

Claies

22.4k4 gold badges56 silver badges81 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

celsomtrindade Over a year ago

I'm using the bindings because I may have one-way-databind data as well as two-way, depending on the use case. Since I'm starting using components, I tried both, but had this error when using like the example above. So if I have a One-way data binding, how should I do?

Claies Over a year ago

did you specifically try defining message as optional, as I show working in the plunkr for the 2nd line item?

celsomtrindade Over a year ago

Yes, it worked for a 2 way data-binding, but if I change to < it doesn't work anymore.

Claies Over a year ago

well that seems to be a different question, since you don't even mention using < in your question body and aren't using it in the example you posted. I'll experiment with it a bit though and see what might be going on.

Claies Over a year ago

just messing with the plunker, < throws an error because there is no matching HTML to read from, but <? seems to work fine.

|

Scottie · Accepted Answer · 2016-05-14 16:13:22Z

2

It's because you've defined message as a 2 way binding, but your html doesn't provide anything to bind to.

This line:

<home-comp></home-comp>

should be

<home-comp message='myMessageVariable'></home-comp>

And you need to declare myMessageVariable somewhere in the scope.

answered May 14, 2016 at 16:13

Scottie

11.4k21 gold badges75 silver badges116 bronze badges

1 Comment

celsomtrindade Over a year ago

But when I declare this.message = '...' isn't the same? Could you provide a working example?

Collectives™ on Stack Overflow

Angular 1.5 component Expression 'undefined' in attribute

2 Answers 2

6 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related