Within my markup, there is a substantial chunk of code enclosed with ng-controller tags. The structure resembles this:
<div ng-controller="MyController">
<script>
// MyController is initialized with current_item_data to streamline data loading
var current_item_data = <?= json_encode($this->view->current_item_data) ?>;
var current_parent_item_data = <?= json_encode($this->view->current_parent_item_data) ?>;
</script>
<!-- large markup here -->
</div>
The challenge arises when I aim to reuse the same controller multiple times on one page, for instance:
<div>
<div ng-controller="MyController">
<script>
var current_item_data = []; /* contains item #1 data */
var current_parent_item_data = []; /* stores parent item #1 data */
</script>
</div>
<div ng-controller="MyController">
<script>
var current_item_data = []; /* has item #2 data */
var current_parent_item_data = []; /* retains parent item #2 data */
</script>
</div>
</div>
Within the initialization logic of MyController, the following is found:
app.controller('MyController', ['$scope', '$window', function($scope, $window) {
$scope.currentItemData = $window.current_item_data;
$scope.parentItemData = $window.current_parent_item_data;
}]);
As evident, each instantiation of MyController references the same global variable, leading to unexpected behavior.
I am seeking any workaround as immediate refactorization of the codebase is not feasible at present.