1

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.

Luis Vargas
  • 2,466
  • 2
  • 15
  • 32

1 Answers1

3

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

Community
  • 1
  • 1
Günter Zöchbauer
  • 623,577
  • 216
  • 2,003
  • 1,567