ui-gmap-windows directive doesn't allow me to use ng-if, or ng-switch, but will template

[mjabraham47]

Basically, I want to use some kind of conditional directive within the "ng-non-bindable" element in order to selectively render some icons onto my infowindow.

Is this at all possible?

   <ui-gmap-markers models="locations"
      idKey='id'
       coords="'self'"
        >
      <ui-gmap-windows show="show">
            <div ng-non-bindable>
            {{obj.name}}<br>{{distance}} miles

            <span ng-switch="'{{men}}'">
            <span ng-switch-when="2" class="ion-man" ></span> 
            <span ng-switch-when="1"></span>
            </span>
            <span ng-switch="'{{women}}'">
            <span ng-switch-when="2" class="ion-woman" ></span> 
            <span ng-switch-when="1"></span>
            </span>
            <span ng-switch="{{fam}}">
            <span ng-switch-when="2" class="ion-ios-people"></span>
            <span ng-switch-when="1"></span>
            </span> 
            </div>                     
        </ui-gmap-windows>
   </ui-gmap-markers>

[nmccready]

Best bet is to use the template part of this directive. See template, templateUrl, and templateParameter.

https://github.com/angular-ui/angular-google-maps/blob/master/src/coffee/directives/api/i-window.coffee#L8-L10

https://github.com/angular-ui/angular-google-maps/blob/master/example/street-view-panorama.html#L31-L32

[nmccready]

Using the templating is the most powerful way to get the rest of the angular functionality you desire. The other way / intuitive but not easy (for the api) is more or less a hack.

[mjabraham47]

Thanks, I appreciate the help...still no luck though, the markers and infowindows appear but the windows don't show anything from my template. I don't get an error of any kind in the console.

Main HTML:

<ui-gmap-markers models="location" idKey='id' coords="'coords'">
<ui-gmap-windows show="show" templateUrl="'icons.html'" templateParameter="'coords'" >
<div ng-non-bindable>
</div>
</ui-gmap-windows>
<ui-gmap-markers>

Template HTML:
<div ng-controller="InfoCtrl">
{{obj.name}}<br>{{distance}} miles
<span ng-if="{{obj.men}}" class="ion-man"></span>
<span ng-if="{{obj.women}}" class="ion-woman"></span>
<span ng-if="{{obj.family}}" class="ion-ios-people"></span>
</div>

[nmccready]

Try window instead not nested.

[nmccready]

Can you get a small plnkr or jsfiddle I can mess with to try and get some where?

[mjabraham47]

I've created a plnkr...thanks a lot for taking a look.

http://plnkr.co/edit/61keN0?p=preview

[GrantSchoffelen]

You need to use the templateUrl and templateParameter attributes on the ui-gmap-windows directive. The templateUrl is a property on the object that you're passing in which is a string that is the path to the .html template you want to use. The templateParameter is a property on the object that you are passing which is an object containing the parameters you want passed in. See code below. Also you can reference the docs here: http://angular-ui.github.io/angular-google-maps/#!/api/windows

<ui-gmap-windows  idKey="'name'" show="show" templateUrl="'pathToHtmltemplate.html'" templateParameter="'{name: 'name', distance: 1.3, womens_restroom: true}'">
</ui-gmap-windows>

Then in your html template you can use ng-if no problem.

Note you have to reference the object you pass into templateParameter as parameter in the html template so the

pathToHtmlTemplate.html file would look like this

<div>
    {{parameter.name}}<br>{{parameter.distance}} miles
    <span ng-if="parameter.womens_restroom" class="ion-woman"></span>
</div>

Once I used the templates I was able to get ng-if working no problem

[nmccready]

TY @GrantSchoffelen

[nelsongallardo]

not sure if it works, mjabraham47 plunker is just like GrantSchoffelen said, however it doesn't work. Is there something missing there? I have a similar code and I can just see an empty box when using a template

[mauriciobaccin]

If you do:

<ui-gmap-marker>
    <ui-gmap-window idKey="'name'" show="show" templateUrl="'pathToHtmltemplate.html'" templateParameter="'{name: 'name', distance: 1.3, womens_restroom: true}'" ></ui-gmap-window>
</ui-gmap-marker>

it will work fine. But if you try this:

<ui-gmap-markers>
 <ui-gmap-windows idKey="'name'" show="show" templateUrl="'pathToHtmltemplate.html'" templateParameter="'{name: 'name', distance: 1.3, womens_restroom: true}'" ></ui-gmap-windows>
</ui-gmap-markers>

when you click on a marker it will open an empty box

[nelsongallardo]

that's the thing, I'm using , I don't actually need to use but even if I use it doesn't work, just like in http://plnkr.co/edit/61keN0?p=preview

[cmddavid]

I'm having the same problem here. Did you already solve it?