accessing parent scope inside overlayservice view - Using Umbraco and getting started

Go to solution

Press Ctrl / CMD + C to copy this to your clipboard.

Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at

Neil 40 posts 205 karma points

Apr 28, 2022 @ 14:00
0

Accessing parent $scope inside overlayService view
Can someone explain if it's possible (and if so, how) to access variables/functions on a angular controller, from inside a view loaded into the overlayService?

For clarity, here's an example of what I want to do;

in controllerName.controller.js;
```
angular.module("umbraco").controller("controllerName", function ($scope, overlayService) {
  $scope.foo = "bar"
  overlayService.open({
    view: "path/to/view.html",
    ... 
  }
}
```
in path/to/view.html
```
<div>{{$scope.foo}}</div>
```
Now, this obviously doesn't work as $scope does not exist inside the overlay view (I'm assuming it's completely scoped as a separate controller by Umbraco, on our behalf).

Is there an easy way to access "foo" from the parent scope?
Copy Link
Kevin Jump 2342 posts 14889 karma points MVP 8x c-trib

Apr 28, 2022 @ 14:31
1
Hi Niel,

you can pass the values you need on in the options for the overlay, and i think they then become accessible via $scope.model inside the overlay

e.g
```
angular.module("umbraco").controller("controllerName", function ($scope, overlayService) {    
  $scope.foo = "bar"
  overlayService.open({
    view: "path/to/view.html",
    foo: $scope.foo 
    ... 
  }
}
```
then in your view :
```
<div>{{model.foo}}</div>
```
(the $scope is implied when getting values inside the view - but also the $scope is that over the overlay not the controller that called it. )

As an example this is how uSync does it for one of the settings overlays https://github.com/KevinJump/uSync/blob/v9/main/uSync.Backoffice.Assets/App_Plugins/uSync/settings/settings.controller.js#L79-L93)

and the view https://github.com/KevinJump/uSync/blob/v9/main/uSync.Backoffice.Assets/App_Plugins/uSync/settings/settings.overlay.html
Copy Link
Neil 40 posts 205 karma points

Apr 28, 2022 @ 14:40

0

I tried that, but it makes a copy of the variable, so bindings don't work.

Maybe my example was too slimmed down.

I've got a promise that's firing as soon as the controller is loaded, and when the promise finishes, it sets a variable on the parent scope. I then want to be able to bind this on the overlays, so if the overlay is opened before the promise is resolved, it'll update once it is.

Hope that makes more sense.

Copy Link
Kevin Jump 2342 posts 14889 karma points MVP 8x c-trib

Apr 28, 2022 @ 14:45
100
If you pass a model if the value you want inside it then usually that will be bound.

e.g.
```
function myController($scope,...)  {

  var vm = this
  vm.myObject = { 
        foot = 'not loaded' 
   }

   overlayService.open({ 
         myObject: vm.myObject 
   };
}
}
```
if the value myObject.foo is set when the promise returns then that should change inside the overlay too.

Although personally, i would either not show the option to display the overlay until the promise has finished, so have something like vm.loading = true; set it to false when the promise returns and wrap the page in <div ng-if="!vm.loading">

or i would have a dedicated controller for the overlay view and have that call the promise.
Copy Link
Neil 40 posts 205 karma points

Apr 28, 2022 @ 14:48

0

Ah of course, I'm currently passing it an Array, which will make a copy - but an object should be passed by reference, and thus should keep the changes.

I'll try wrapping it in an object and see what happens.

Edit: Yup, seems so obvious in hindsight. I was clearly staring at this for far too long!

Thanks for your help

Copy Link
is working on a reply...

Please Sign in or register to post replies

Flag this post as spam?

Accessing parent $scope inside overlayService view