How can I get a value taken by one of my components to be passed to another component in the same module?
I'll try to simplify the code I'm working with to focus entirely on the problem. So say we have two js files:
infoGetter.js
angular.module('info-system')
.component('info-getter', {
controller: function(){
this.info = ["info1", "info2", "info3", "info4"];
this.indexGot;
this.getIndex = function($index){
this.indexGot = $index;
}
},
template: `
<li class="info-list"
ng-click="$ctrl.getIndex($index)"
ng-repeat="info in $ctrl.info"
>
</li>
`
});
and
infoDisplayer.js
angular.module('info-system')
.component('info-displayer', {
controller: function(){
this.info = /* item at index indexGot from the info array in infoGetter.js */;
},
template: `
<pre>{{$ctrl.info}}</pre>`
});
So the intent is to display in the infoDisplayer "info[$index]" taken from the clicked list element in infoGetter and the info array from infoGetter. How do I make that work?
Well, I know there should probably be an easier way to do this, but I tried just putting the info array and $index from the on-click function into the global window object to access it there, but it doesn't seem to work; for one thing it's not updating on-click like I would expect, and for another it seems to kinda glitch out when the page first loads even when I make this.indexGot = 0 in the infoGetter.js controller; it seems like "this.indexGot" is undefined when the page loads (but not afterwards?), so it doesn't actually pull anything from the array.
