I am currently facing a challenge with my nested directive where I need to establish communication with another directive on the same page, sharing the same controller. Although I initially attempted the isolate scope approach, the complexity of the nesting led me to abandon that method. With the future deprecation of $scope
in Angular 2.0 in mind, I am exploring alternative solutions that align with Angular Best practices. Any suggestions for a more suitable approach?
Within the nested directive (3 levels deep):
$scope.chooseCard = function (selectedId) {
this.data = 'init value';
$rootScope.$emit('row chosen', selectedId);
this.data = selectedId;
};
Inside directive #2 which requires data from the nested directive:
$rootScope.$on('row chosen', function (e, data) {
ctrl.id = data;
console.log("this is the IDDDDDD", ctrl.id);
Service.func(ctrl.id);
});