I'm currently exploring directives and my goal is to bind a value to my grandchild component, then update the parent element. However, I've encountered an issue as this code does not propagate up to the root.
var myApp = angular.module('myApp',[]);
//myApp.directive('myDirective', function() {});
//myApp.factory('myService', function() {});
myApp.controller('root', function ($scope) {
vm = this;
vm.value = 'Joe Doe';
});
myApp.directive('child', function () {
return {
restrict: 'A',
scope: {
paramOne: '=paramOne'
},
link: function (scope, elm, attrs) {
console.log('Child value: ', scope.paramOne);
}
}
});
myApp.directive('grandchild', function () {
return {
restrict: 'A',
scope: {
paramTwo: '=paramTwo'
},
link: function (scope, elm, attrs) {
console.log('Grandchild value: ', scope.paramTwo);
}
}
});<script src="//unpkg.com/angular/angular.js"></script>
<div ng-app="myApp" ng-controller="root as vm">
Field Value: <strong>{{vm.value}}</strong>
<hr>
<div child param-one="vm.value">
Child param value: {{paramOne}}
<div grandchild param-two="paramOne">
Granchild param value: {{paramTwo}} <br>
<input type="text" ng-model="paramTwo" >
</div>
</div>
</div>I have conducted some research but have not found a solution for this particular scenario. Any help provided would be greatly appreciated :)