Angularjs 1,5 Вложенных компоненты привязки

Question

пытаются передать значение из родительской-компоненты к его вложенному ребенку-компоненту в угловом 1.5

Значение может быть обновлено от родителей, но ребенок не может отредактируйте его, просто покажите его. То есть односторонняя переплета '<' Право?

И я не могу передать дочерний компонент в объявлении родительского компонента, потому что у родительского компонента тоже было бы другое использование.

Пункт мой родительский компонент имеет общие данные, но они дети собираются использовать его по-разному.

И родительский компонент будет использоваться раз в несколько раз, с разными детьми , вот почему я не могу передать детям внутри родителя объявление . Мне нужно, чтобы связать данные для автоматического обновления целей, когда родители обновляет данные, должны быть отражены детьми

HTML

<parent-component ng-transclude> 
    <child-component name="$ctrl.characters.arya"></child-component> 
    <child-component name="$ctrl.characters.john"></child-component> 
</parent-component> 

JS

// Parent Component declaration 
// ///////////////////////// 
(function() { 
    'use strict'; 
    angular 
    .module('app') 
    .component("parentComponent", { 
     transclude: true, 
     controller: "ParentComponentController", 
     template: 
     '<div class="parent-c"></div>' 
    }); 
})(); 



// Parent Component Controller 
// ///////////////////////// 
(function() { 
    'use strict'; 
    angular 
    .module('app') 
    .controller('ParentComponentController', ParentComponentController); 

    function ParentComponentController() { 
    var $ctrl = this; 
    $ctrl.characters = {}; 
    $ctrl.characters.arya = "Arya Stark"; 
    $ctrl.characters.john = "John Snow"; 
    } 
})(); 




//CHILD Component declaration 
// ///////////////////////// 
(function() { 
    'use strict'; 
    angular 
    .module('app') 
    .component("childComponent", { 
     bindings: { 
     name: '<' 
     }, 
     controller: "ChildComponentController", 
     template: 
     '<div class="child-c"' + 
      '<h3>Im a child Component</h3>' + 
      '<p><strong>Name: </strong>{{$ctrl.name}}</p>' + 
     '</div>' 
    }); 
})(); 



// CHILD Component Controller 
// ///////////////////////// 
(function() { 
    'use strict'; 
    angular 
    .module('app') 
    .controller('ChildComponentController', ChildComponentController); 

    function ChildComponentController() { 
    var $ctrl = this; 
    } 
})(); 

---

Check the WORKING SAMPLE on plunkr

---

требуется Атрибут предназначен для связи компонентов, но я стараюсь использовать его без успеха :(, нужен кусок света здесь.

Answer 1

вы должны использовать: <child-component name="$parent.$ctrl.characters.arya"></child-component> передать значение из родительской компоненты к его вложенным ребенку-компоненту

Answer 2

Существует различные проблемы, связанные с вашим кодом:

function ParentComponentController() { 
    var $ctrl = this; 
    $ctrl.characters = {}; 
    $ctrl.characters.arya = "Arya Stark"; 
    $ctrl.characters.john = "John Snow"; 
    } 

Вам не нужны определите для этого локальную переменную, поскольку нигде не изменяйте контекст.

controller: "ParentComponentController", 

Не передать строку к этому свойству, передать ссылку:

controller: ParentComponentController, 

Затем, если вы хотите передать name через родительский контроллер с потребуем ребенка компонента:

require: { parent: '^^parentComponent' }, 

Теперь, когда у вас есть родительский контроллер, связанный с ребенком, вы можете использовать его с:

{{$ctrl.parent.characters.arya}} 

в шаблоне.

http://plnkr.co/edit/3PRgQSGdBEIDKuUSyDLY?p=preview

Если вам нужно передать имя как атрибут для ваших дочерних компонентов, вы должны поместить дочерние элементы внутри шаблона родителя, так что вы можете позвонить $ ctrl.

http://plnkr.co/edit/1H7OlwbumkNuKKrbu4Vr?p=preview