Angular 1.5 Nested Components Associate Parental Value

Question

I am new to angularjs. I am trying to use angular 1.5 nested component. Can I bind a property of a parent component in a child component.

Example:

<div ng-app='cbsApp' ng-controller='cbsCnt as ct'> <cbs-cus-comp com-bind='ct.name'> <child child-com-bind='cbsCusCompCntAs.name'></child> </cbs-cus-comp> </div> 

I can get the ct.name value in com-bind. But cannot get cbsCusCompCntAs.name in child-com-bind. (cbsCusCompCntAs is the cbs-cus-comp controller)

Work Plunker: https://plnkr.co/edit/axQwTn?p=preview

Thanks in advance.

Answer 1

In the first case, you access the controller area directly through controllerAs .

When using components in angular 1.5, you can get your parent component via require , which will make the parent properties available after $onInit according to the Component Documentation :

Please note that the required controllers will not be available during the creation of the controller, but they are guaranteed to be available before running the $ onInit method!

In your specific case, you can update the child component to require a parent:

 var child = { require : {parentComp:'^cbsCusComp'}, template : 'Child : <b{{cbsCusChildCompCntAs.childComBind}}</b>', controller : cbsCusChildCompCnt, controllerAs: 'cbsCusChildCompCntAs' }; 

and its controller to get the data you need (I used the same names as for its work):

 function cbsCusChildCompCnt(){ this.$onInit = function() { this.childComBind = this.parentComp.name; }; } 

Updated plunker here .

Answer 2

Wow ... what a wonderful example ... It took me a while to analyze this ... so I wrote my own (I think, a little more readable) version. I really don't know how to work with Plunker ... so here is the code ... Extract index.html from my file

 <div ng-controller='appCtrl as ctrl'> <parent bind-id='ctrl.name'> <child bind-toid='parentCtrlAs.name'></child> </parent> </div> 

.Js file

 (function () { 'use strict'; var parentComponent = { bindings : { bindId:'=' }, controller : parentCtrl, controllerAs: 'parentCtrlAs', restrict : 'A', transclude : true, templateUrl : 'parent.html', }; var childComponent = { controller : childCtrl, controllerAs: 'childCtrlAs', restrict : 'A', require : { myParent :'^parent' }, templateUrl : 'child.html', }; angular .module('app', []) .controller('appCtrl' , appCtrl) .component('parent' , parentComponent) .component('child' , childComponent); function appCtrl(){ this.name = 'Main..'; } function childCtrl(){ this.$onInit = function() { this.bindToid = this.myParent.name; }; } function parentCtrl(){ this.name = 'Parent Component'; } 

}) ();

Hope this helps, Regards, Johnny

Answer 3

Although using the require parameter works, it creates a closely related relationship between a component acting as a child that uses the require parameter and a component acting as a parent that consumes child functions.

The best solution is to use component relationships, as shown here .

Basically, you define a binding function in the definition of a child component, for example,

 angular.module('app').component('componentName', { templateUrl: 'my-template.html', bindings: { myFunction: '&' }, controller: function() { // Do something here} }); 

Then in the parent markup you provide a function to call,

Parent HTML

 <user-list select-user="$ctrl.selectUser(user)"> </user-list> 

Finally, in the parent controller, provide the implementation of the selectUser function.

Plunk works here.