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>

Answer 1

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.