Question

所以我读了Why is ng-non-bindable required for <ui-gmap-windows> element in Angular Google Maps? 我得到了如何在指令中使用ng-non-bindable。

我的问题是我尝试使用ng-if有条件地在我的标记信息窗口中显示一些图标。 ng-if不能使用ng-non-bindable，当然，如果没有它，信息窗口就无法工作。

如果有人可以告诉我如何制作 - 如果在这种情况下工作或提供替代解决方案，我非常感激。

      <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>

Answer 1

它不起作用的原因是，ng-if（600）的优先级低于ng-non-bindable（1000），ng-non-bindable为{{1因为terminal:true的终端性质，所以ng-if 永远不会编译 。您可以尝试使用ng-non-bindable（ng-switch）直接使用1200元素，因为它具有 更高优先级 ，但不确定是否如果您可能有多个条件可以成立，则适用于您的情况。

你也可以创建自己的指令说my-non-bindable并使用配置ng-non-bindable定义它并将其与{priority:599, terminal:true}一起使用说：

ng-if

并将其与.directive('gmapTemplate', function() { return { priority: 599, terminal: true }; });一起使用。

ng-if

否则，您必须使用<div gmap-template ng-if="someCond">{{obj.name}}<br>{{distance}} miles

将元素中的非绑定包装起来

ng-if

＆＃13;

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

＆＃13;

angular.module('app', []).directive('gmapNonBindable', function() {
  return {
    priority: 599,
    terminal: true
  };
});

＆＃13;

Answer 2

您需要在ui-gmap-windows指令中使用templateUrl和templateParameter属性。 templateUrl是您传入的对象上的属性，该属性是一个字符串，是您要使用的.html模板的路径。 templateParameter是您传递的对象上的属性，它是包含您要传入的参数的对象。请参阅下面的代码。您也可以在此处参考文档：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>

然后在您的html模板中，您可以使用ng - 如果没有问题。

请注意，您必须将传递给templateParameter的对象作为参数添加到html模板中，以便

pathToHtmlTemplate.html文件看起来像这样

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

在Angular Google Maps中使用ng-if进行ng-non-bindable

2 个答案: