$scope inside a popover in unreachable!


#1

Why is the $scope not visible inside a popover??? I cannot use functions local to the $scope nor simple curly brace variables {{variable_in_the_$scope}} … nor ng-model=“some_variable_in_$scope”

Here is a self explanatory example based on the demo from the IONIC blog post about popovers. ( http://codepen.io/anon/pen/DhlfK )

Many thanks if you can answer that !!

Félix


#2

You need to create a new controller with the function and add ng-controller to your pop-up template ion-content.

<ion-content ng-controller="PopupCtrl">

#3

Can’t seem to do it with the same controler / scope to have access to functions and variables in the scope that called the popover. Kinda obvious that the buttons and labels refered in the popover would be in direct relation to the current scope of the screen actually shown to the user when the popover popped !

Can you edit the codepen to do something like that ? ( the function and variable you copied in the other controller have the same name but don’ share values with the original scope)

thanks for trying/ answering anyways!

Edit: i tried assigning the same controller “appCtrl” to the popover… and it crashes codepen… :frowning:


#4

http://ionicframework.com/docs/api/controller/ionicPopover/

{object=} scope The scope to be a child of. Default: creates a child of $rootScope.

In you Controller you need to add $rootScope;

.controller('AppCtrl', function($scope , $rootScope,  $ionicPopover) {

and then use this for the variable you need to pass on the popover

$rootScope.myvar = "hello";
$scope.myfunction=function(){
    var d = new Date();
    $rootScope.myvar="some change" + d.getMilliseconds() ;
  }

with this the variables will be accessible on the popover from the function

$ionicPopover.fromTemplateUrl('templates/popover.html', function(popover) {    
  $scope.popover = popover;
});

you can access your variable by popover.scope.$parent.variableName || popover.scope.$root.variableName

        <a class="item" href="http://learn.ionicframework.com/" target="_blank">
         {{popover.scope.$parent.myvar}}
        </a>

I tried to use this for simplicity

  $scope.mytest = popover.scope.$parent.myvar ;
  console.log( popover);
  $scope.popover = popover;

But its not working.

CodePen:


Popovers in b14 nightly
#5

One last thing : What is going on with the docs about popovers on the official website’s docs? ( http://ionicframework.com/docs/api/service/$ionicPopover/ ) - This does not work,… it gives an error on the “.then” method.

it’s compleely different from the blog post about popovers!! ( http://ionicframework.com/blog/popover-support-landed/ )

Any ideas / suggestions ?? Would be nice to specify that the parent scope is $scope rather than $rootscope !

Thanks!


#6

OOPS !! Figured it out myself

Proof :

( http://codepen.io/anon/pen/exfqb?editors=101 )

Sorry about that - you guys are a great community and ionic f*cking rocks man!


Handlers for list items in popover