Двухстороннее связывание массива в AngularJS получает пустой набор

Question

У меня возникли проблемы с использованием массива, привязанного к моему компоненту.

Мой родительский шаблон:

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

vm.dataSource представляет собой массив строк.

Мой пользовательский компонент:

.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 }}
  `
}

Мой вывод на консоль

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

И мой отрендеренный дочерний шаблон:

['lorem', ...]
[]

Кажется, что когда я пытаюсь назначить vm.cDataSource для vm.data, набор пуст, но когда он выводит vm в консоли, он становится пустым в свернутом виде, но если я разверните его, это показывает элементы (4 в этом случае). Кроме того, когда я печатаю в шаблоне, переменная прямого связывания (vm.cDataSource) имеет элементы, а локальная (vm.data) - нет.

Я использую AngularJS 1.5.0-rc.2.

Answer 1

Можете ли вы попробовать изменить

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

ниже мой полный код:

    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 }} <br>
         {{ vm.data | json }}
      `
    });