FORM does not get displayed in ui-gmap-window

[yashgt]

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

In this plunkr, I have set up the click event to set a flag to True. The flag should display the ui-gmap-window.
Issue 1: The window does not appear immediately. I have to zoom in/out to make it appear.
Issue 2: The window does not show the FORM element. It however instantiates the controller associated with the form.
Issue 3: The controller of the form is instantiated every time the window is shown. I was expecting the controller to be created just once and the form getting hidden or shown based on the flag.

[rummelsworth]

1. You need to trigger a digest when handling the map's click event. Otherwise, Angular has no way to know that it needs to update the view. Something like this:

   $scope.$apply(function () {
     addStopWindow(model["0"].latLng);
   });
   

2. The content of the window directive is used as a template. Only the first child element in the content is used (source). Remove the FORM text node, and you should see your form element rendered in the info-window.

3. Because the content of the window directive is a template, it gets recompiled each time the info-window is shown. Each compilation creates a controller. Inside the directive's models, the google.maps.InfoWindow.close method is called when the info-window is hidden, which destroys the compiled view by removing it from the DOM (source).

Here is an updated plunker.

[yashgt]

Regarding point 3:
If the StopController always gets instantiated, what can I do to get some data passed to the controller?
http://plnkr.co/edit/YU5gWC1FR8v2WemPNDR0?p=preview
This shows that stopDetail object publsihed through the locationChannel never makes it to the StopController. The form always shows blank.

[rummelsworth]

The publish/callback pattern you have there is a bit convoluted. The callback's closure is always using the previous controller's scope, so the assignment of stopDetail never happens on the current controller.

What I would do to try to simplify things is have a service that holds the current location and update it on each map click. The controller can be injected with this service and can then query it to initialize its model when its being constructed. (It might also be a good idea to only let the window element exist when the stopDetail data exists, for example by using ng-if.)

Here's another plunker demo'ing these ideas. I removed a lot to streamline the example as much as possible. This should be enough for you to adapt to your own actual code. Hope this helps.

[yashgt]

This time, I have done it as suggested by you. There is no publish and subscribe. The main controller sets the data on the service. The StopController is expected to get the data in the injected service.

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

This time StopController does not get instantiated when the window is shown. Hence, obviously the data is not getting passed between the controllers. What might have caused this?

[rummelsworth]

Your plunker's public view is locked at an old version from two days ago (June 5, 2015 1:22:22 PM, CDT).

[yashgt]

Sorry. Saved it now. The change I made should be visible.

[rummelsworth]

Because the controller is instantiating only once, the assignment of stopDetail onto the controller only happens that one time. So the new objects created and assigned to the service on each click are never seen.

You could replace the stopDetail property on the controller with a function that returns the stopDetail object from the service, and appropriately replace stopDetail in your form template with getStopDetail() or whatever you name it. This way the function is always returning the most current object from the service.

Alternatively, you could mutate the service's current stopDetail (after it's created the first time) instead of replacing it with an entirely new object on each click.

Interestingly, when I make either of these changes to your example, in addition to the behavior you want, I also observe the controller now being constructed with every click. If it did this at first, the changes I suggest wouldn't be necessary (because the stopDetail assignment from service to controller would happen each time the controller was constructed). However, it definitely wasn't constructing the controller with each click without them. I'm not at all sure off the top of my head what the explanation for this might be. Perhaps some kind of on-the-fly optimization within Angular is having an effect? Or something in one of the AGM directives? Dunno. Not seeing any errors in the JS console.

[yashgt]

I have simplified it quite a lot. Removed StopController. Now there is only one parent controller and hence no publish-subscribe or passing data from one to another.
http://plnkr.co/edit/YU5gWC1FR8v2WemPNDR0?p=preview
However, the two-way binding using ng-model in the form does not work. The one-way binding done by {{}} works.

Looks like the main controller does not apply for whatever is in the form. The Save button should cause an alert. That does not happen. How does the 1-way binding work then?

[rummelsworth]

I already tried this simplification and ran into the same behavior you're describing. Frankly, I don't understand it :-)

uiGmapWindow uses isolate scope which would I think imply that the lat/lng-bound fields wouldn't change at all since the updates occur to a property on the parent scope and that property is inaccessible via prototypal lookup on the scope chain. Yet, those fields do reflect the updates. That the name/address fields don't reflect updates or aren't bound in the desired way is not the surprising part of this. (To me, at least. Others who may know better could chime in.)

In particular, I tried what I thought was the correct approach, using the templateParameter attribute to allow the window's template scope access to the stopDetail object. (It's doing templateScope.parameter = /* templateParameter expression */ on the inside, so if you use templateParameter="stopDetail" you should then use {{parameter.latitude}} etc.) This didn't work at all, and I'm not sure why. It was at least consistent, in that both the lat/lng and name/address fields were all not updated.

I don't know whether these behaviors reflect bugs or very subtle and unintuitive correct behavior. In the meantime, you can always throw the other controller back into the mix and send data via the service. This is a very common and generally recommended pattern in Angular.

[nmccready]

@wrummler can u provide the url for your fork?

[rummelsworth]

@nmccready Yep, here's what I'd been working with: http://plnkr.co/edit/iEMMpxoecwbd5I9L919E?p=preview

[rummelsworth]

@nmccready I haven't looked at this one in a while, but while investigating it, I wrote the following note to myself:

Stepping through showWindow never assigned templateParameter, even though it was provided to the directive. @scope.template is undefined where it seems it shouldn't be, since a template was actually provided inside the directive's element in the HTML.

Unfortunately, that's all I wrote and I don't remember more context.

Just throwing this up here as a possible seed for any other diggers. I might get back 'round to it eventually, too.