ons-popover use page controller or pass controller $scope

[jcdenton]

I have this page:

<div ng-controller="pageController as ctrl">
<ons-page>
        <ons-toolbar>
            <div class="left">
                <ons-toolbar-button ng-click="menu.left.open()" modifier="material"><ons-icon icon="md-menu" size="24px"></ons-icon></ons-toolbar-button>
            </div>
            <div class="center">Title</div>
            <div class="right">
                <ons-toolbar-button modifier="material" ng-click="popover.show($event)"><ons-icon icon="md-more-vert" size="24px"></ons-icon></ons-toolbar-button>
            </div>
        </ons-toolbar>
        <ons-list>
            <ons-list-item ons-lazy-repeat="ctrl.delegate">
                <div class="center">
                    {{ item}}
                </div>
            </ons-list-item>
        </ons-list>
    </ons-page>

    <ons-popover cancelable cover-target direction="down" var="popover">
        <ons-list>
            <ons-list-item ng-repeat="lang in ctrl.langs">
                {{lang}}
            </ons-list-item>
        </ons-list>
    </ons-popover>
</div>

The obvious reason I wrap the page and popover element inside a div is to share the same controller. It’s working but It doesn’t feel right.

In the above example, I am using controllerAs syntax and saving the controller (this) to a variable (i.e var vm = this;).
How can the popover access the page’s controller variables and functions using this syntax? (In dialogs, I can pass the $scope variable as option to have the desired behavior). No matter what I’ve tried, I couldn’t get to a nice solution.

Thanks in advance.

[Fran Diox]

@jcdenton You can pass parentScope parameter to a popover in the exact same way you are doing it for dialogs. Read Loading from a template page in the tutorial.

[jcdenton]

@Fran-Diox Thanks for your response. I’ ve seen the tutorial, but my problem is that I don’t use $scope in my controller and passing the variable that holds the controller (i.e var vm = this;) like this : ons.createPopover('languagesPop.html',{ parentScope: vm }) is not working.

[Fran Diox]

@jcdenton Oh, I see. I don’t think this is possible basically because Angular’s $compile service still requires a real scope object. I think $scope hasn’t been removed completely from AngularJS, it is still required when using methods like $scope.$watch and so on, so I don’t see any problem in injecting $scope in your controller for ons.createPopover.

[jcdenton]

@Fran-Diox, Apart from the $scope issue, it seems when using the popover from template I am getting Error: Invalid target exception.

I changed the popover code in the tutorial to match the one of the dialogs (but using popover instead) to see if the popover will show in browser (in case something is wrong in my setup) but it throws the same error again. Check this codePen to see the error yourself.

Thanks in advance

[Fran Diox]

@jcdenton That’s actually normal. You are not providing the target where the popover should be displayed. Docs here. Just pass '#myButton' and set that ID to your ons-button.

[jcdenton]

@Fran-Diox Ok… I see, I did not set the target at all!
thanks again

[Fran Diox]

@jcdenton No problem, glad it helped :)