dylanfprice / angular-gm

AngularJS Google Maps Directives
MIT License
198 stars 47 forks source link

Conditionally compile the infowindow contents #61

Closed brocksamson closed 9 years ago

brocksamson commented 10 years ago

The compilation of the info window is extremely useful and adding a simple bool check avoids the problem described in #27.

irfaan commented 10 years ago

+1

Solved my issue of ng-click not firing inside infowindow. See my comment here: https://github.com/dylanfprice/angular-gm/issues/27#issuecomment-43976190

intellix commented 10 years ago

With this, my ng-click is fixed, but am getting an error when using an Angular UI Carousel with Angular 1.2.18 inside that infoWindow:

Error: [ngTransclude:orphan] Illegal use of ngTransclude directive in the template! No parent directive that requires a transclusion found. Element: <div class="carousel-inner" ng-transclude="">
http://errors.angularjs.org/1.2.18/ngTransclude/orphan?p0=%3Cdivlass%3D%carousel-inner%22%20ng-transclude%3D%22%22%3E

The carousel directive uses replace and transclude... I imagine the $compile screws it up because it already exists in the DOM and is compiled and then gets recompiled when it's opened? Not really sure about this one.

Without this conditional compiling, my carousel works perfectly fine, just the ng-click which doesn't work.

brocksamson commented 10 years ago

intellix -> could you include a jsFiddle sample please? That will make debugging this issue much simpler.

intellix commented 10 years ago

I've had a look into what causes this and how to fix it. T'was as I said. It's within the DOM and compiled by angular (along with child directives with their own ng-transcludes).

if I remove both the element.replaceWith('<div></div>'); and $compile(element.contents())(scope); then my ngClicks work and other directives don't throw warnings. One problem is that the HTML appears on top of the map, but I can hide it and display like:

div[gm-info-window] {
    display: none;
}

#map-canvas {
    width: 100%;
    height: 100%;

    div[gm-info-window] {
        display: block;
    }
}

So it only displays when it exists within the map-canvas. I think replacing the element and compiling the contents is hacky.

Here is the plnkr: http://plnkr.co/edit/tpl:FrTqqTNoY8BEfHs9bB0f?p=preview. If you open your console you can see it. If you remove the two pieces I mentioned, you can see everything works.

dylanfprice commented 9 years ago

What's the current status of this PR? @brocksamson are you able to add intellix's fixes to the PR? Sorry it has taken me so long to look at this.

dylanfprice commented 9 years ago

I fixed this by going with @intellix's fix and requiring the user to hide the infowindow declaration in the dom.