Обновлять:
Использование ng-include height равно 0. Ниже я привел полностью упрощенный пример. Мне нужно знать, как это исправить и сделать так, чтобы на странице было написано «Привет».
<ion-view title="Page">
<ion-content padding="true" class="has-header">
<div ng-include="'templates/page30'"></div>
</ion-content>
</ion-view>
<p>Hello</p>
Исходное сообщение:
Мне нужно выяснить, как заставить мой ng-include
отображаться в ng-switch
. В настоящее время код не работает. Две вещи происходят не так, как ожидалось. Внешняя кнопка очень маленькая, а подформы, включенные в ng, не отображаются, поскольку их высота равна 0. Пожалуйста, имейте в виду, что я использую Ionic, что означает, что у меня нет доступа к *.height()
.
ПРИМЕЧАНИЕ. Я показываю только шаг 1 из ng-switch
, иначе это было бы слишком громоздко.
<ion-view title="Some Template" hide-nav-bar="true">
<ion-content padding="true" class="has-header">
<div ng-controller="someCtrl">
<ng-switch on="step">
<div ng-switch-when="1">
<div height-bind height-value="containerHeight">
<ng-include src="'templates/somepage.html'"></ng-include>
</div>
</div>
</ng-switch>
</div>
</ion-content>
</ion-view>
Я построил директиву, которая выглядит следующим образом:
llApp.directive('heightBind', function() {
return {
scope: {
heightValue: '='
},
link: function($scope, $element) {
$scope.$watch(function() {
$scope.heightValue = $element.prop('offsetHeight');
});
}
}
});
Шаблон, вызываемый ng-include
, выглядит следующим образом:
<ion-view title="Services" hide-nav-bar="true">
<ion-content padding="true" class="has-header">
<div class="page-header">
<h1>
<span>Lawncare</span>Services</h1>
</div>
<ul class="list">
<li class="item item-checkbox">
Mow Lawn
<label class="checkbox">
<input type="checkbox">
</label>
</li>
<li class="item item-checkbox">
Trim Plants
<label class="checkbox">
<input type="checkbox">
</label>
</li>
</ul>
</ion-content>
</ion-view>
Последняя вещь. Контроллер someCtrl
выглядит следующим образом: (фактическая ссылка на контроллер отсутствует, потому что я сейчас работаю в Ionic Creator)
function($scope, $stateParams) {
// Set the step initially to 1 every time this controllwer is instantiated.
// Usually on ng-switch button update the
// step value via the setStep function provided
$scope.step = 1;
$scope.setStep = function(step) {
$scope.step = step;
}
$scope.containerHeight = 0;
}
Некоторые другие вещи, на которые я смотрел, чтобы решить эту проблему. Я просмотрел: http://plnkr.co/edit/XQB7MTP9fyXdir2EOopM?p=preview
А также этот планкер: планкер