I know that in angular exists something called $rootScope. This one contains variables that are going to be shared by all the controllers. I'm looking for something similar for Polymer, so that I don't need to pass a parent variable as attributes always.
Right now I'm doing something similar to this:
index html code:
<body>
<my-parent-component some-attribute="hello"></my-parent-component>
</body>
parent html code:
<my-parent-component>
<template>
<p>someAttribuet could be used by parent: {{someAttribute}}</p>
<my-child-component some-attribute="{{someAttribute}}"></my-child>
</template>
</my-parent-component>
parent dart code:
class MyParentComponent extends PolymerElement {
@published var someAttribute;
}
child html code:
<my-child-component>
<template>
<p>some Attribute used here: {{someAttribute}}</p>
</template>
</my-child-component>
child dart code:
class MyChildComponent extends PolymerElement {
@published var someAttribute;
}
In other words, I'm passing the attribute all the way down from the top parent until the lowest child. I think this is not good and I would like to do it with something similar to $rootScope in angular.
Polymer doesn't have a root scope. In Polymer there is just the element and maybe parent elements or child elements you can reference in your expression. A more generic solution are global variables or a globals element like explained here https://stackoverflow.com/a/29864797/217408