How to get around Error: $compile:nonassign Non-Assignable Expression in angular 1.5 component

Question

So I'm relatively new to components, bindings, and the Angular 2 paradigm. I want to get my Angular 1.3 application ready to transfer, so I've been trying to adopt the new component directive.

I haven't been able to get past the non-assignable binding error though!

Here's where I include the component:

<schedule currentSchedule="[]" class="panel"></schedule>

And the component itself:

app.component('schedule', {
bindings: {
    currentSchedule: "="
},
controllerAs: 'SchedCtrl',
controller: function(Schedules) 
{

    var scope = this

    Schedules.refresh()
    .then(function(result) {
        scope.currentSchedule = result
    })
},
templateUrl: "templates/schedule.html"
})

And the component template:

<div ng-repeat="apt in SchedCtrl.currentSchedule | orderBy: 'App_DtTm'">
    {{apt.name}}
</div>

I feel like I'm missing something very obvious here. Any help would be hugely appreciated.

Answer 1

The error means that you are trying to assign a value to expression [] via two-way binding.

https://docs.angularjs.org/error/$compile/nonassign

If you really need two-way binding, use a property of the parent scope.

<schedule currentSchedule="parentCtrl.currentSchedule" class="panel"></schedule>

If you don't need two-way binding, use < instead of = and separate the initial schedule and the current schedule.

app.component('schedule', {
  bindings: {
    initialSchedule: "<"
  },
  controllerAs: 'SchedCtrl',
  controller: function(Schedules) 
  {

    var scope = this
    scope.currentSchedule = scope.initialSchedule

    Schedules.refresh()
      .then(function(result) {
        scope.currentSchedule = result
    })
  },
  templateUrl: "templates/schedule.html"
})