How to access parent component in angularjs 1.5
Hi i am trying to display simple components in angularjs where child needs to access parent name.And my code goes like this:
HTML file:
<html>
<head>
<script type='text/javascript' src='angular.min-1.5.0.js'></script>
<script type='text/javascript' src='app.js'></script>
</head>
<body ng-app="componentApp">
<div ng-controller="helloCnt">
<hello name="Parent"></hello>
<hello1 name="Child"></hello1>
<label>List: <input name="namesInput" ng-model="names" ng-list=" | " required></label>
</div>
</body>
</html>
CODE:
app.component('hello', {
transclude: true,
template:'<p>Hello I am {{$ctrl.name}} and ctrl name is {{myName}}</p>',
bindings: { name: '@' },
controller: function($scope) {
$scope.myName = 'Alain';
alert(1);
}
});
app.component('hello1', {
require: {
parent: 'hello'
},
template:'<p>Hello I am {{$ctrl.name}} && my parent is {{myNameFromParent}} </p>',
bindings: { name: '@' },
controller: function($scope) {
$scope.myNameFromParent=this.parent.myName;
alert(2);
}
});
And it throws an error :
TypeError: Cannot read property 'myName' of undefined
I am not able to figure out what is wrong in the code and why it can't find the parent.Any inputs on the mistake I am making.Seems to be a small one I might have missed.
Answer
Actually I got the answer after making following modification with the answer @gyc pointed:
JS CODE:
angular
.module('componentApp', [])
.controller('helloCtrl', function ($scope) {
$scope.names = ['morpheus', 'neo', 'trinity'];
})
.component('hello', {
transclude: true,
template: '<p>Hello I am {{parentCtrl.name}} and my name is {{parentCtrl.myName}}</p><ng-transclude></ng-transclude>',
controllerAs: 'parentCtrl',
controller: function ($scope) {
this.myName = 'Braid';
},
bindings: {
name: '@'
}
})
.component('hello1', {
template: '<p>Hello I am {{$ctrl.name}} && my parent is {{myNameFromParent}} </p>',
controller: function ($scope) {
this.$onInit = function () {
$scope.myNameFromParent = this.parent.myName;
};
},
bindings: {
name: '@'
},
require: {
parent: '^hello'
}
});
HTML:
<html>
<body ng-app="componentApp">
<div ng-controller="helloCtrl">
<hello name="Parent">
<hello1 name="Child"></hello1>
</hello>
<label>List:
<input name="namesInput" ng-model="names" ng-list=" | " required>
</label>
</div>
</body>
</html>
The common mistake I was doing it was not following the nested component format and not using transclude in my parent. The rest worked fine when I made these two changes and modified my subsequent code.
P.S - The ng-list included in HTML has nothing to do with components.That was for other purpose.
@gyc - thanks for the help.Your input helped.
@daan.desmedt - I was hoping for the solution in components not directives.