In my project, I am developing an app using a component-based approach with Angular 1.5.5.
As part of this development, I am utilizing d3js to create some elements with the class .floating-node. For each of these nodes, I am creating a new $scope and appending it inside a compiled component.
The relevant section of code looks like this:
nodeEnter.each(() => {
let childScope = this.$scope.$new();
childScope.test = "test";
let compiled = this.$compile('<mycomponent></mycomponent>')(childScope);
(this.mainContainer).append(compiled);
});
This portion of the code is functioning perfectly.
Now, let's take a look at the mycomponent:
export default class Mycomponent {
constructor($scope) {
console.log($scope.test); // undefined
console.log($scope.$parent.test); // test
}
}
Mycomponent.$inject = ["$scope"];
However, when I enter the mycomponent, I encounter difficulties accessing the correct $scope.
After checking the $id, I have realized that the childScope.$id increments in Mycomponent as $scope.$id += 1.
While I understand that I can navigate using $scope.$parent, doing so may result in unnecessary creation of $scope objects, which is not ideal especially within a loop.
So, the question remains - how can I achieve consistency with the same $scope across components?