CODEWITHSUNDEEP
javascriptangularjsgoogle-mapsangularjs-directiveangular-google-maps
GeneralBear
GeneralBear

Reputation: 1021

ng-non-bindable with ng-if in Angular Google Maps

So I read Why is ng-non-bindable required for <ui-gmap-windows> element in Angular Google Maps? and I get how ng-non-bindable is used in the directive.

My problem is that I'm trying to use ng-if to conditionally reveal some icons in my marker infowindows. ng-if doesn't work with ng-non-bindable, and of course, the info windows don't work without it.

If someone can tell me how to make ng-if work in this situation or give an alternative solution, i'd greatly appreciate it. 

      <ui-gmap-windows show="show">
            <div ng-non-bindable>{{obj.name}}<br>{{distance}} miles
            <span class="ion-man" ng-if="obj.men"></span>
          <span class="ion-woman" ng-if="obj.women"></span>
            <span class="ion-ios-people" ng-if="obj.people"></span>  
            </div>                     
          </div>
      </ui-gmap-windows>

Upvotes: 0

Views: 1060

Answers (2)

Gschoff
Gschoff

Reputation: 129

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>

Upvotes: 1

PSL
PSL

Reputation: 123739

The reason it does not work is because, ng-if (600) has lower priority than ng-non-bindable (1000) and ng-non-bindable is terminal:true so ng-if never compiles due to the terminal nature of ng-non-bindable. You could try using ng-switch (1200) directly on the element with ng-non-bindable though since it has higher priority but not sure if that is applicable in your case if you may have multiple conditions that can be true.

You can as well create your own directive say my-non-bindable anddefine it with configuration, {priority:599, terminal:true} and use it with ng-if say:

.directive('gmapTemplate', function() {
  return {
    priority: 599,
    terminal: true
  };
});

and use it with ng-if.

<div gmap-template ng-if="someCond">{{obj.name}}<br>{{distance}} miles

Otherwise you will have to wrap non bindables within element with ng-if

<div ng-if="someCond">
   <span ng-non-bindable>{{obj.name}}<br>{{distance}} miles</span>
</div>


angular.module('app', []).directive('gmapNonBindable', function() {
  return {
    priority: 599,
    terminal: true
  };
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>
<div ng-app="app" ng-init="test:123; show:false">
  Show-->
  <input type="checkbox" ng-model="show" />
  <div gmap-Non-Bindable ng-if="show">{{test}}</div>


</div>

Upvotes: 1

Related Questions