Двухстороннее связывание массива в 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>

ниже мой полный код для этого:

    импорт угловой из "угловой";
      var myMod = angular.module('plunker', []).controller('MainCtrl', функция ($scope) {
        $ Scope.DataSource=[1,3,4,5,6,7];
    });`

    myMod.component('customComponent', {
      привязки: {
        cDataSource: '='
      },
      контроллер: функция () {
        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(ВМ); 
        }
      },
      controllerAs: 'vm',
      Шаблон:`
         {{ vm.cDataSource | JSON}} 

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