Итак, я прочитал, почему ng-non-bindable требуется для элемента <ui-gmap-windows> в Угловых Google Картах? и я получаю, как ng-non-bindable используется в директиве.
Моя проблема в том, что я пытаюсь использовать ng-if, чтобы условно выявить некоторые значки в моих указателях-окнах. ng-if не работает с ng-non-bindable, и, конечно, информационные окна не работают без него.
Если кто-то может сказать мне, как сделать ng-если работа в этой ситуации или дать альтернативное решение, я бы очень признателен.
<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>
Вам нужно использовать атрибуты templateUrl и templateParameter в директиве ui-gmap-windows. TemplateUrl - это свойство объекта, который вы передаете, в котором находится строка, которая является путем к шаблону.html, который вы хотите использовать. ШаблонParameter является свойством объекта, который вы передаете, который является объектом, содержащим параметры, которые вы хотите передать. См. Код ниже. Также вы можете обратиться к документам здесь: 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-if
(600
) имеет более низкий приоритет, чем ng-non-bindable
(1000
), а ng-non-bindable
- terminal:true
поэтому ng-if
никогда не компилируется из-за терминальной природы ng-non-bindable
. Вы можете попробовать использовать ng-switch
(1200
) непосредственно в элементе с ng-non-bindable
хотя, поскольку он имеет более высокий приоритет, но не уверен, что это применимо в вашем случае, если у вас может быть несколько условий, которые могут быть истинными.
Вы также можете создать свою собственную директиву, чтобы сказать, что моя-несвязуемая, и определите ее с конфигурацией, {priority:599, terminal:true}
и используйте ее с ng-if
say:
.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>