Shawn Shawn - 1 month ago 12
Javascript Question

Error Binding strings with Angular 1.5 components

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

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.