Two way array binding in AngularJS gets an empty set

Question

I'm having some troubles to assing an array bound to my component.

My parent template:

<custom-component c-data-source="vm.dataSource"></custom-component>

vm.dataSource is an array of string.

My custom component:

.component('customComponent', {
  bindings: {
    cDataSource: '='
  },
  controller: function () {
    var vm = this;
    vm.data = [];
    vm.$onInit = onInit;

    function onInit() {
      vm.data = vm.cDataSource;
      console.log(vm);
    }
  },
  controllerAs: 'vm',
  template: `
     {{ vm.cDataSource | json }}
     {{ vm.data | json }}
  `
}

My console output

controller {cDataSource: Array(0), ...}
> cDataSource: (4) ['lorem', ...]

And my rendered child template:

['lorem', ...]
[]

It seems like when I'm trying to assign vm.cDataSource to vm.data the set is empty, but when it prints out vm in the console, it's empty in the collapsed view but if I expand it, it shows the elements (4 in this case). Also, when I print in the template, the direct bound variable (vm.cDataSource) has elements but the local one (vm.data) does not.

I'm using AngularJS 1.5.0-rc.2.

Answer 1

Can you please try to change

<custom-component c-data-source="vm.dataSource"></custom-component> To <custom-component c-data-source="dataSource"></custom-component>

below is my complete code for it :

    import angular from 'angular';
      var myMod = angular.module('plunker', []).controller('MainCtrl', function($scope) {
        $scope.DataSource=[1,3,4,5,6,7];
    });`

    myMod.component('customComponent', {
      bindings: {
        cDataSource: '='
      },
      controller: function () {
        var vm = this;
        vm.data = [];
        vm.$onInit = onInit;

        function onInit() {
          vm.data  = vm.cDataSource;
          vm.cDataSource = [1,3,4,5,6,7,8,9,10];
          console.log(vm); 
        }
      },
      controllerAs: 'vm',
      template:`
         {{ vm.cDataSource | json }} 

         {{ vm.data | json }}
      `
    });