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

Question

所以我读了我了解了指令中如何使用 ng-non-bindable 。

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

如果有人能告诉我如何使 ng-if 在这种情况下工作或提供替代解决方案，我将不胜感激。

      <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 是 terminal:true 所以 ng-if 永远不会编译 由于 ng-non-bindable 的终端性质。您可以尝试直接在带有 ng-non-bindable 的元素上使用 ng-switch (1200)，因为它具有 更高的优先级 但不确定这是否适用于您的情况，如果您可能有多个条件可能为真。

您也可以创建自己的指令，例如 my-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

将不可绑定元素包装在元素中

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

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-if 没问题。

请注意，您必须引用传递给 templateParameter 的对象作为 html 模板中的参数，因此

pathToHtmlTemplate.html 文件看起来像这样

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

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

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

javascript

google-maps

angularjs

angularjs-directive

angular-google-maps