Angularjs 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

要求属性是为组件通信，但我试图用它没有成功:(在这里需要一块光。

来源

2016-08-17 Héctor León

你想传递一个名称为组件（通过绑定）的属性或由父（通过要求）继承？ – gyc

你必须使用：<child-component name="$parent.$ctrl.characters.arya"></child-component>从父分量的值传递给他的嵌套的子组分

来源

2016-08-17 12:04:44 DMCISSOKHO

嗨！感谢您的回答。这个工作，但似乎太容易成为现实，是否有一些糟糕的表现或使用这个不好的做法？ –

有自我包含的元素更好。您可以在另一个项目中轻松使用它们。但通常如果你需要外部信息，注入或绑定它们。 – DMCISSOKHO

问题是我的父母组件有共同的数据存储，但他们的孩子会用不同的方式使用它们。并且父组件将被多次使用，并且与不同的孩子一起使用，这就是为什么我不能在父母声明中传递孩子。我需要绑定信息，为了自动更新目的，当父母更新数据时，必须由孩子反映。 –

有你的代码不同的问题：

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

来源

2016-08-17 12:28:22 gyc

嗨！感谢您的回复。关于plunkr我有一个文件中的所有内容，但在本地我有每个组件3个文件：1 component.js，1 component.controller.js，1 component.template.html多数民众赞成这就是为什么我定义局部变量和使用字符串，而不是参考。有一种方法可以获取名称作为属性，但在父模板之外？比如将该名称存储在子组件变量或类似的东西中。 –

Angularjs 1.5嵌套组件绑定

回答

相关问题