Error Binding strings with Angular 1.5 components

Question

I am trying to bind a string through the html of an angular 1.5 component. I am getting an error message that says:

Error: [$compile:nonassign] Expression ''My Title'' in attribute 'title' used with directive 'selectList' is non-assignable!

This is the html where I am calling the component:

index.html

<select-list title="'My Title'"></select-list>

and the component:

export var selectListComponent = {
    bindings: {
        title: "="
    },
    templateUrl: 'path/selectList.html',
    controller: selectListController
};

and the component html:

<div>{{$ctrl.title}}</div>

Simon K · Accepted Answer · 2016-11-07 22:16:11Z

2

You're using two way binding and providing a constant string as the binding target.

You would need to change your component to use:

export var selectListComponent = {
    bindings: {
        title: "@"
    },
    templateUrl: 'path/selectList.html',
    controller: selectListController
};

The @ will evaluate the value it is passed (a string in this case) and then perform one-way binding to the directive scope.

answered Nov 7, 2016 at 22:16

Simon K

2,8771 gold badge15 silver badges21 bronze badges

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

1 Comment

Shawn Over a year ago

Thank you Simon, at first I was trying it with '<' for the one-way binding but I guess that is not for primitive data types? marked as answer though, was exactly what was wrong

Collectives™ on Stack Overflow

Error Binding strings with Angular 1.5 components

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related