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