angularjsangularjs-bindingsangularjs-components

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


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.


Solution

  • 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"
    })