Search code examples
angularjspopover

onsen popover scope issue

Does anybody know what's up with onsen's popover component?

when I try to access a variable of the nearest controller defined, it doesn't work. it's always loading variables from the root scope.

neither {{name}} or {{option}} seems to be resolved correctly:

<body ng-controller="AppController">
  <ons-navigator var="navigator">
    <ons-page ng-controller="PageController">
      <ons-template id="popover.html">
        <ons-popover cancelable direction="down">
          <my-dialog>{{name}}!</my-dialog>
          <ons-list>
            <ons-list-item ng-repeat="option in options" modifier="tappable">
              {{ option }}
            </ons-list-item>
          </ons-list>
        </ons-popover>
      </ons-template>
    </ons-page>
  </ons-navigator>
</body>

http://plnkr.co/edit/w2ZL3dkv62qSYrhhEj5C?p=preview

Instead of load the name defined in PageController, it's loading the name defined in AppController

Solution

  • auto answering.

    Seems like the createPopover is just twisted up. either on purpose or not it will always resolve the variables with the root scope. which is not great

    Here is a fix for the method createPopover, so you can handle the scope. Otherwise the scope is always the rootScope

    http://plnkr.co/edit/W4GgqLcJHlj724IB2KRG?p=preview

    ons.createPopover = function(page, __scope) {
...
   ons.compile(popover[0], __scope);
...
}

ons.compile = function(dom, __scope) {
   var scope = __scope || angular.element(dom).scope();

    I added the __scope variable in createPopover and compile. and I create the popover with the scope of the controller:

    ons.createPopover('popover.html', $scope)

    this way it takes the given scope to resolve variables. angular.element(dom).scope(); is always resolved to root because the popup element is appended to the body on the createPopover function.